轮播 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <div class="swiper">
            <div class="imgList">
                <div class="imgItem" style="background-image: url(img/IMG_3550.JPG);"></div>
                <div class="imgItem" style="background-image: url(img/IMG_3551.JPG);"></div>
                <div class="imgItem" style="background-image: url(img/IMG_3552.JPG);"></div>
            </div>
            <div class="btn">
                <div class="leftBtn"></div>
                <div class="rightBtn"></div>
            </div>
            <div class="circleList">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
            
        </div>
        <script type="text/javascript">
            var left=document.querySelector(".btn .leftBtn")
            var right=document.querySelector(".btn .rightBtn")
            var imgList=document.querySelectorAll(".imgList .imgItem")
            var circleList=document.querySelectorAll(".circleList .circle")
            var imgNum=0;
             function renderImg(imgNum)
             {
                 imgList.forEach(function(item,index){
                     if(imgNum == index)
                     {imgList[imgNum].style.zIndex=10;
                         //通过改变同一个类的不同css样式来改变
                     circleList[index].className="circle active"
                     
                     }
                     else{
                         item.style.zIndex=0;
                         circleList[index].className="circle"
                     }
                 })
             }
             renderImg(imgNum)
             
             right.onclick = function () {
                 imgNum++;
                 if(imgNum>=imgList.length)
                 {imgNum = 0;}
                 renderImg(imgNum)
             }
             left.onclick = function () {
                 imgNum--;
                 if(imgNum<0){
                     imgNum=imgList.length - 1;
                     
                 }
                 renderImg(imgNum)
             }
             
            
        </script>
    </body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
.swiper{
    width: 1226px;
    height: 460px;
    margin: 0 auto;
    position: relative;
}
.imgList{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/*下面必须要有一个空格，不然出不来。*/
.imgList .imgItem{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: auto 100%;
    background-position:center;
    background-repeat: no-repeat;
}
.btn .leftBtn{
    width: 60px;
    height: 60px;
    background-image: url(../img/left1.png);
    background-size: auto 100%;
    background-position:center;
    background-repeat: no-repeat;
    position: absolute;
    left: 100px;
    top:calc(50% - 30px);
    z-index: 100;
}
.btn .rightBtn{
    width: 60px;
    height: 60px;
    background-image: url(../img/right1.png);
    background-size: auto 100%;
    background-position:center;
    background-repeat: no-repeat;
    position: absolute;
    right: 100px;
    top:calc(50% - 30px);
    z-index: 100;
}
.circleList{
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.circle{
    width: 10px;
    height: 10px;
    border: 2px  solid #aaa;
    /*黑色*/
    background-color: #555;
    border-radius: 7px;
    margin: 0 10px;
    
}
/*下面的没有用空格的，是指同一个类*/
.circle.active{
    width: 10px;
    height: 10px;
    border: 2px  solid #aaa;
    /*白色*/
    background-color: #fff;
    border-radius: 7px;
    margin: 0 10px;
    
}

 

posted @ 2020-01-31 22:19  ziyuliu  阅读(119)  评论(0)  编辑  收藏  举报