js新手实现轮播图简单易懂

新手学习完，自己做的小轮播，自动切换及小圆点变换没问题了。
但是还存有几个小bug，还烦请大佬评论解答一下；
box为显示的视图，设置溢出隐藏,
big为大的图片容器，通过控制left值，实现切换图片的效果

1、当图片移动到第四张时，为了实现无缝效果，后面跟了第一张图片，这样定时器就会导致，在第一张图片停留两倍的时间。
2、刷新页面，如果还没切换，此时点击第一个小圆点，left值会变为1210px,但此时输出n明明还是0。
3、如果加左右切换的箭头，该怎样找到当前的n？如果直接设置left移动300px,是直接切换的，不是缓缓拖拉的效果。
不胜感激

html部分

 <div class="box">
        <ul class="big">
            <li>
                <img src="./img/1.jpg" alt="">
            </li>
            <li>
                <img src="./img/2.jpg" alt="">
            </li>
            <li>
                <img src="./img/3.jpg" alt="">
            </li>
            <li>
                <img src="./img/4.jpg" alt="">
            </li>
            <li>
                <img src="./img/1.jpg" alt="">
            </li>
        </ul>
        <div class="circle">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
       
    </div>

css部分

 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin: 50px auto;
            position: relative;
            box-sizing: border-box;
            border: 5px solid pink;
            z-index: 10;
        }

        .big {
            width: 1500px;
            height: 300px;
            position: relative;
            left: 0;
        }

        .big li {
            float: left;
        }

        .big li img {

            width: 300px;
            height: 300px;
        }

        .circle {
            width: 100px;
            height: 20px;
            display: flex;
            position: absolute;
            justify-content: space-around;
            bottom: 0;
            right: 50%;
        }

        .circle span {
            display: block;
            width: 20px;
            height: 20px;
            background: red;
            border-radius: 50%;

        }

        .active {
            background: pink !important;
        }
      
    </style>

js部分

 <script>
        var oul = document.getElementsByClassName('big')[0];
        var circle = document.getElementsByClassName('circle')[0];
        var spans = circle.getElementsByTagName('span');
        var box = document.getElementsByClassName('box')[0];
        var n = 0;
        var timer = null;
        function autoPlay() {
            timer = setInterval(function () {
                n++;
                if (n >= 5) {
                    n = 0;
                };
                //小圆点背景色切换
                for (var i = 0; i < spans.length; i++) {
                    spans[i].className = '';
                    spans[n == 4 ? 0 : n].className = 'active';
                }
                //调用下方的移动函数
                move(oul, 'left', 10, -300 * n);
            }, 2000)
        }
        autoPlay();
        //让oul位置动起来  elem:元素  attr:属性  speed：速度  target:目标值
        function move(elem, attr, speed, target) {
            //根据初始值和目标值的大小，决定速度的正负
            speed = parseInt(getComputedStyle(elem)[attr]) > target ? -speed : speed;
            var timer1 = setInterval(function () {
                //获取oul初始left值
                var oulLeft = parseInt(getComputedStyle(elem)[attr]);
                //移动的距离 =初始值+速度
                var speedend = oulLeft + speed;
                //移动到目标距离后，清除定时器
                if (speedend < target) {
                    speedend = target;
                    clearInterval(timer1)
                }
                elem.style[attr] = speedend + 'px';
            }, 20)
        }
        //移入显示框，停止计时器，避免和点击事件冲突
        box.onmouseenter = function () {
            clearInterval(timer);
           
        }
        //小圆点点击事件
        for (var i = 0; i < spans.length; i++) {
            //自定义属性，获得相应小圆点的下标
            spans[i].index = i;
            spans[i].onclick = function () {
             
                for (var i = 0; i < spans.length; i++) {
                    spans[i].className = '';
                    spans[this.index].className = 'active';
                }
                move(oul, 'left', 10, -300 * this.index);
            }
        }
        //移出时，开启定时器
        box.onmouseleave = function () {
            autoPlay();
        }

    </script>