无缝轮播图1-CSDN博客

本文链接：https://blog.csdn.net/qq_37964302/article/details/86262976
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            #con{
                position: relative;
                width:700px;
                height:300px;
                margin:0 auto;
                margin-top:100px;
                overflow: hidden;
            }
            .btn-box{
                list-style: none;
            }
            .btn-box li,.now{
                float:left;
                width:20px;
                height:20px;
                background: rgba(0, 0,0, .5);
                margin-right:5px;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                border-radius: 5px;
            }
            #img-box{
                width:4200px;
                position: absolute;
                left:0;
                /* transition: left 1s linear; */
            }
            #img-box img{
                width:700px;
                height: 300px;
                float:left;
                /* display: none; */
            }
            /* .img-box .active{
                display: block;
            } */
            ul{
                position: absolute;
                right:10px;
                bottom:-5px;
            }
            .btn-left{
                position: absolute;
                bottom:10px;
                left:10px;
            }
           .btn-box .sel{
               background: orangered;
           }
        </style>
    </head>
    <body>
        <div id="con">
            <div id="img-box">
                <img src="img/1.jpg" alt="" class="active">
                <img src="img/2.jpg" alt="">
                <img src="img/3.jpg" alt="">
                <img src="img/4.jpg" alt="">
                <img src="img/5.jpg" alt="">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="btn-left">
                <div id="prev" class="now">&lt;</div>
                <div id="arrow" class="now">&gt;</div>
            </div>
            <ul class="btn-box">
                <li class="sel">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <script src="../jslib.js"></script>
    <script>
       
        var oImgBox=document.getElementById("img-box")
        var oImg=oImgBox.getElementsByTagName("img");
       
        var oLi=document.getElementsByTagName("li");

        var oPrev=document.getElementById("prev");
        var oArrow=document.getElementById("arrow");

       var iNow=0;
       oArrow.onclick=function(){
           iNow++;
           if(iNow==oImg.length){
            oImgBox.style.left = 0 ;
               iNow=1;
           }
        change(iNow);
      }
      oPrev.onclick=function(){
        iNow--;
           if(iNow==-1){
            oImgBox.style.left = -(oImg.length-1)*oImg[0].offsetWidth+'px' ;
               iNow=oImg.length-2;
           }
        change(iNow);
      }
       function change(e){
             for(var i=0;i<oLi.length;i++){
         oLi[i].className="";
        }
        oLi[e==oLi.length?0:e].className="sel";

        // 此调用的方法不用写单位
        animate(oImgBox,{
                left :-e *oImg[0].offsetWidth 
            });
       }
       
    </script>
</body>
</html>