原生JS无缝轮播

<style>
    img{
        width: 400px;
        height: 400px;
        float: left;
    }
    .box{
        width: 400px;
        height: 400px;
        margin: 0 auto;
    }
    .lunbo{
        width: 400px;
        height: 400px;
        border: 4px solid red;
        overflow: hidden;
        position: relative;
    }
    .imgs{
        width: 2800px;
        height: 400px;
        position: absolute;
    }
    .le,.ri{
        display: inline-block;
        position: absolute;
        /* width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 20px; */
    }
    .le{
        top: 200px;
        left: -30px;
    }
    .ri{
        top: 200px;
        left: 400px;
    }
    .uls{
        display: inline-block;
        position: absolute;
        top: 350px;
        left: 110px;
    }
    .uls li{
        float: left;
        list-style: none;
        width: 10px;
        height: 10px;
        background-color: rgba(137, 43, 226, 0.425);
        margin-left: 10px;
        border-radius: 50%;
    }
    .on{
        width: 20px!important;
        background-color: blueviolet!important;
    }
</style>

<div class="box">
        <div class="lunbo">
            <div class="imgs">
                <img src="./头像/9.jpg" alt="">
                <img src="./头像/13.jpg" alt="">
                <img src="./头像/12.jpg" alt="">
                <img src="./头像/11.jpg" alt="">
                <img src="./头像/10.jpg" alt="">
                <img src="./头像/9.jpg" alt="">
                <img src="./头像/13.jpg" alt="">
            </div>
            <div class="lr">
                <button class="le"><</button><button class="ri">></button>
            </div>
            <ul class="uls">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

 <script>
         var imgs=document.querySelector(".imgs")
         var img=document.querySelectorAll(".imgs img")
         var lb=document.querySelector(".lunbo")
         var time=null;
         var num=1;
         var lis=document.querySelectorAll(".uls li")
         var le=document.querySelector(".le")
         var ri=document.querySelector(".ri")
         time=setInterval(function(){
              fn();
              num++
         },1000)
         fn=function(){
             if(num>5){
                 num=1;
                 imgs.style.left=0+"px"
                 imgs.style.transition="all 0s"
             }
             if(num<=0){
                 num=5
                 imgs.style.left=-2800+"px"
                 imgs.style.transition="all 0s"
             }
             imgs.style.left=-img[num].offsetLeft+"px"
             imgs.style.transition="all 0.5s"
            lis.forEach(function(v,i){
                v.classList.remove("on")
            })
            lis[num-1].classList.add("on")
         }
         lb.onclick = function(e) {
             var  t=e.target;
             if(t.className=="le"){
                 num--;
                 fn()
             }
             if(t.className=="ri"){
                 num++;
                 fn()
             }
             if(t.tagName=="LI"){
                 var s=[...lis].indexOf(t)
                 num=s+1;
                 fn(num)
             }
         }
         lb.onmouseover = function() {
             clearInterval(time)
            le.style.left=0+"px"
            le.style.transition="all 0.5s"
            ri.style.left=378+"px"
            ri.style.transition="all 0.5s"
         }
         lb.onmouseout = function() {
             le.style.left=-30+"px"
             le.style.transition="all 0.5s"
             ri.style.left=400+"px"
             ri.style.transition="all 0.5s"
            time=setInterval(function(){
              fn();
              num++
         },1000)
         }
    </script>

大家关注一下新人