JS中关于轮播图的制作

这是轮播图显示的效果图，点击下面的按钮会显示相应的图片，下面代码会只贴出来js部分，css样式看个人发挥去写。

关于轮播图，重要的是在临界值的思考上。再js中我放了4张图片，最后一张和第一张一样。当走完图片，此时应该判断是否切换成第二张，因为第一张在最后一张显示过了。并且同时设ul的偏移量归0，否则切换成第二张会有拉回开的感觉，有违和感。具体见代码。

关于下面小圆点有两点：1：先清除所有再添加的思想。2：当显示第4张时设置小圆点为1，同第一张一样。下面时小圆点的部分设置代码，防止只看js看不懂。

 #num li.hover {
            background-color: red;
        }
<ul id="num">
            <li class="hover">1</li>
            <li>2</li>
            <li>3</li>
        </ul>        

以下为轮播图的js代码

 <script>
        //第一步：获取信息；
        var odiv = document.querySelector('div');
        var oul = document.querySelector('#list');
        var ali = document.querySelectorAll('#list li');
        var wid = odiv.offsetWidth;
        oul.style.width = ali.length * wid + 'px'
        var i = 0
        //封装临界值条件
        function move() {
            i++
            //当第索引值为没有图片的时候，切换成显示的第二张图片，即i=1；
            if (i == ali.length) {
                i = 1;
                //如果直接显示第二张，会存在直接拉回来的情况，且区块由i控制
                //-3*900->-1*900
                // 0         ->-1*900
                //如上规律，会重新正常显示
                oul.style.left = 0;
            }
            //对于划过的小圆点，应该有先清后加的思想，保持永远只有一个产生效果。
            for (let j = 0; j < numli.length; j++) {
                numli[j].className = '';
            }
            //因为最后一张图片，小圆点应该和第一张相同；
            if (i == ali.length - 1) {
                numli[0].className = 'hover';
            } else {
                numli[i].className = 'hover';
            }
            //调用运动函数
            startMove(oul, {
                left: -i * wid,
            })
        }
        //设置定时器
        var timer = setInterval(() => {
            //调用上面的封装 函数
            move();
        }, 3000);
        //清定时器，点击小圆点的前提工作
        //移入清除
        odiv.onmouseover = function () {
            clearInterval(timer)
        };
        //移出恢复正常
        odiv.onmouseout = function () {
            timer = setInterval(() => {
                move();
            }, 3000);
        }
        //获取小圆点
        var numli = document.querySelectorAll('#num li');
        //划过小圆点显示对应的图片
        for (let j = 0; j < numli.length; j++) {
            numli[j].onmousemove = function () {
                //因为move()里有i++
                i = j - 1;
                //再调用
                move()
            }
        }
    </script>