轮播图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .carousel-container{
            width: 500px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .carousel{
            width: 100%;
            height: 100%;
            display: flex;
            transition: 1s ease-in-out;
        }
        .carousel .carousel-slide img{
            width:500px;
            height: 100%;
        }
        .carousel-circle{
            position: absolute;
            width:40px;
            bottom: 10px;
            left:50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;
        }
        .carousel-circle span{
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
        }
         .carousel-circle .active{
            background-color: aquamarine;
         }
    </style>
</head>
<body>
    <div class="carousel-container" id="box1">
        <div class="carousel">
             <div class="carousel-slide">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb"/>
            </div>
              <div class="carousel-slide">
                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba"/>
            </div>
              <div class="carousel-slide">
                <img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b"/>
            </div>
        </div>
        <!-- <div class="carousel-btn btn-prev" onclick="prev()">
            <span class="ee-prev">‹</span>
        </div>
        <div class="carousel-btn btn-next" onclick="next()">
            <span class="dd">›</span>
        </div> -->
        <div class="carousel-circle">
            <span class="active" data-index="0"></span>
            <span data-index="1"></span>
            <span data-index="2"></span>
        </div>
    </div>
    <script>
        const carouselDom=document.querySelector('.carousel');
        const circleDom3=document.querySelectorAll('.carousel-circle>span');
        const circleBtnDom=document.querySelector('.carousel-circle');
        let index=0;
        function moveTo(index){
            carouselDom.style.transform=`translateX(-${index*100}%)`;
            document.querySelector('.carousel-circle span.active').classList.remove('active');
            circleDom3[index].classList.add('active');
 
        }
        setInterval(()=>{
            if(index>=circleDom3.length){
                index=0;
            }
            moveTo(index);
           if(index<circleDom3.length){
                index++;
            }
        },3000)
        circleBtnDom.addEventListener('click',function(event){
            console.log(event.target.dataset['index']);
            const curindex=event.target.dataset['index'];
            moveTo(curindex);
        })
    </script>
</body>
</html>

 

posted @ 2025-12-23 14:54  howhy  阅读(3)  评论(0)    收藏  举报