原生js无缝轮播

一、html代码

---

<div class="Broadcast">         <div id="ul">                 <img src=''  class='img'>

               < img src=''  class='img' >

               < img src=''  class='img' >

               < img src=''  class='img' >

                < img src=''  class='img' >

        </div>

        <p class="page" id="ul1">

                <span></span>

                < span></span>

                <span><span>

                <span><span>

        </p>

</div>

---

.Broadcast{

    width: rem(750);

    height:rem(350);

    overflow: hidden;

    position: relative;

    div{

        width:rem(3750);

        position: absolute;

        display: flex;

            div{

            width:rem(750);

            height:rem(350);

        }

    }    

}

.page{

    width: 100%;

    position: absolute;

    bottom: 0;

    padding-right: rem(31);

    text-align: right;

    margin-bottom: rem(14);

    span{ width:rem(15);

    height: rem(15);

    display: inline-block;

    border:0;

    border-radius:rem(10);

    background: #ffffff;

    margin-left: rem(11.5);

    }

    span:hover{

        background: #F96E9D;

    }

}

.img{

width:100%;

}

三、js代码

---

//    轮播  (使用定时器控制轮播的间隔时间)   

 var a = 100;   

setInterval(function(){         

 ul.style.left = ul.offsetLeft - a +'px';           

         if( ul.offsetLeft < -3000){                   

                 ul.style.left = '0px'             

        }     

},400)