js 无缝轮播图

写了一个无缝轮播图
带鼠标点击的那种
但是还是有一点小bug
不知道怎么改
点击右边按钮的时候 图片视觉上的效果是比圆点快的 然后就相当于图片跑前面去等圆点追上来
但是点左边的按钮 就没有

我感觉应该是我只设置了一个 索引的关系
我用一个索引控制圆点 和 显示的 图片

看效果和代码


就是这种图片会等圆点过来了在切换 有点点小bug
直接看js代码 css的差不多

 //获取li
        let liFirst = document.querySelectorAll("li")[0];
        //克隆第一个节点
        ul.appendChild(liFirst.cloneNode(true));
        //获取所有li
        let li = document.querySelectorAll("li");
        //设置ul的宽度
        ul.style.width = liFirst.offsetWidth * li.length + "px";
        var a = document.querySelectorAll(".dots a");
        //定义变量保存索引
        var index = 0;
        //设置圆点
        function setDots() {
            if (index >= li.length - 1) {
                //索引设置为0
                //瞬间设置ul的left值为0；
                ul.style.left = 0;
                index = 0;
            } else if (index < 0) {
                //瞬间设置ul的left值为最后一张图；
                ul.style.left = -(li.length - 1) * li[0].offsetWidth + "px";
                index = li.length - 2;  //设置为倒数第二张然后index   然后运动 就完成了  1 切换为4  的动画
            }
            for (var i = 0; i < a.length; i++) {
                a[i].className = "";
            }
            a[index].className = "selected";
        }
        //注册点击事件
        for (var i = 0; i < a.length; i++) {
            a[i].num = i;
            a[i].onclick = function () {
                clearInterval(timer);
                index = this.num;
                console.log(index)
                startMove(ul, "left", -index * li[0].offsetWidth, function () {
                    star();
                });
                setDots();
            }
        }
        // setDots();
        //right按钮
        var right = document.querySelector(".right");
        right.onclick = function () {
            clearInterval(timer);

            setDots();
            index++;
            startMove(ul, "left", -index * li[0].offsetWidth, function () {
                //setDots();
                star()
            });
        }
        //left按钮
        var left = document.querySelector(".left");
        left.onclick = function () {
            clearInterval(timer);
            index--;
            setDots();
            startMove(ul, "left", -index * li[0].offsetWidth, function () {
                //setDots();
                star()
            });
        }
        var timer;
        //每隔3000毫秒 让ul相对于box框向左运动一个li的宽度
        function star() {
            setDots();
            timer = setInterval(function () {
                //索引自增
                index++;
                //运动
                startMove(ul, "left", -index * li[0].offsetWidth, function () {
                    setDots();
                });
            }, 1500);
        }
        star();

改了很多次 还是有点小bug 请教怎么改呀 help me