js实例《四》轮播

HTML：

<div id="show">
        <div id="box">
            <div><img src="01.jpg" alt=""></div>
            <div><img src="02.jpg" alt=""></div>
            <div><img src="03.jpg" alt=""></div>
            <div><img src="04.jpg" alt=""></div>
        </div>
        <div id="list">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <button class="btn1"></button>
        <button class="btn2"></button>
    </div>

css样式:

        #box div{
            width: 500px;
            height: 300px;
            float: left;
        }
        img{
            width: 500px;
            height: 300px;
        }
        #box{
            width: 2000px;
            height: 300px;
            position: relative;
        }
        #show{
            width: 500px;
            height: 300px;
            overflow: hidden;
            margin: 200px auto;
            position: relative;
        }
        #list div{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin: 3px 5px;
            background: #fff;
        }
        #list{
            position: relative;
            width: 80px;
            height: 15px;
            top: -20px;
            left: 210px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
        }
        button{
            width: 30px;
            height: 60px;
            border: none;
            box-sizing: border-box;
            background-color: rgba(32, 223, 213, 0.4);
            position: absolute;
        }
        .btn1{
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            top: 135px;
            left: 0px;
        }
        .btn2{
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            top: 135px;
            right: 0px;
        }

js功能实现

       var div = document.getElementById("box");
        var pic = document.querySelectorAll("#show #box div");
        btn = document.querySelectorAll("button");
        var show = document.getElementById("show")
        var a = 0;
        var biao;
        var nlist = document.getElementById("list")
        var nli = document.querySelectorAll("#list div")
        function fn(num){
            div.style.right= num*500+"px";
            // nli[num].style.backgroundColor = "orange";         
        }

        var timer = setInterval(function lunbo(){
            a++;
            if(a>=pic.length){
                a=0;
            }
            fn(a);
        },1000);
        
        show.onmouseover = function(){
            clearInterval(timer);
        };
        for(let i = 0,n = 0;i<nli.length;i++){
            nli[i].onclick = function(){
                div.style.right= i*500+"px";
            }
        }

        btn[0].onclick = function(){
            a--;
            if(a < 0){
                a=3
            }
            fn(a);
        }
        btn[1].onclick = function(){
            a++;
            if(a > pic.length-1){
                a=0;
            }
            fn(a);
        }```