关于#javascript#的问题：轮播图问题，点击方块，图片移动异常

在点击当前或者之前的方块时。图片会向右一直移动，再次点击才会正常。

  <div id="outer">
        <ul id="imgList">
            <li>
                <img src="../image/003.jpg" alt="熊猫">
            </li>
            <li>
                <img src="../image/004.jpg" alt="熊猫">
            </li>
            <li>
                <img src="../image/005.jpg" alt="熊猫">
            </li>
            <li>
                <img src="../image/006.jpg" alt="熊猫">
            </li>
            <li>
                <img src="../image/007.jpg" alt="熊猫">
            </li>
            <li>
                <img src="../image/003.jpg" alt="熊猫">
            </li>
        </ul>
        <div id="navdiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>

<style>
        *{
            margin: 0;
            padding:0;
        }
        #outer{
            width: 500px;
            height: 340px;
            margin:  50px auto;
            background-color: rgba(108, 248, 166, 0.37);
            padding: 10px 0;
            overflow: hidden; 
            position: relative;
        }
        #imgList{
            position: absolute;
            list-style: none;
        }
        #imgList li{
            float: left;
        }
        #imgList img{
            width: 500px;
            height: 340px;
        }
        #navdiv{
            /* background-color:blanchedalmond; */
            position: absolute;
            bottom: 15px; 
            left: 50%;
            transform: translateX(-50%); 
        }
        #navdiv a{
            float: left;
            margin: 0 5px;
            width: 15px;
            height: 15px;
            background-color: rgba(128, 235, 243, 0.568);
        } 
        #navdiv a:hover{
            background-color: rgba(0, 0, 0, 0.568);
        }
    </style>

 <script>
        window.onload = function(){
            var imgList = document.getElementById("imgList");
            var imgArr = document.getElementsByTagName("img");
            imgList.style.width = outer.offsetWidth*imgArr.length + "px";

            /*设置居中
            var navdiv = document.geyElementById("navdiv");
            var outer = document.getElementById("outer");
            navdiv.style.left = (outer.offsetWidth - navdiv.offsetWidth)/2 + "px";*/
            var allA = document.getElementsByTagName("a");
            var index = 0;
            
            allA[index].style.backgroundColor = "rgba(0, 0, 0, 0.568)";

            for(var i = 0 ; i < allA.length ; i++){
                // 为每个超链接都添加一个num属性
                allA[i].num = i;
                allA[i].onclick = function(){
                    // 关闭自动切换的定时器
                    clearInterval(timer);
                    // 获取点击超链接的索引，并将它设置给index
                    index = this.num;
                    
                    // 图片变化
                    // imgList.style.left = (-ind)*outer.offsetWidth + "px";
                    // 修改选择的a样式
                    setA();
                    move(imgList,"left",(-index)*outer.offsetWidth,30,function(){
                        autoChange();
                    });
                };
            }
            // 开启自动切换
            autoChange();
            function setA(){
                // 判断是否是最后一张
                if(index >= imgArr.length-1){
                    index=0;
                    // 此时显示的最后一张图片，而最后一张=第一张
                    // 通过css将最后一张切换成第一张
                    imgList.style.left = 0;
                }
                // 遍历所有a，并将背景颜色设置为蓝色
                for(var i=0;i<allA.length;i++){
                    // =“”就是去掉内联样式的背景颜色，让他显示style里的颜色
                    allA[i].style.backgroundColor = "";
                }
                allA[index].style.backgroundColor = "rgba(0, 0, 0, 0.568)";
            }
            // 定义一个自动切换的定时器 标识
            var timer;
            function autoChange(){
                timer = setInterval(function(){
                    index++;
                    index %= imgArr.length;
                    move(imgList,"left",(-index)*outer.offsetWidth,30,function(){
                        setA();
                    });
                },3000);
            }
        };
function move(obj,attr,target,speed,callback){
    clearInterval(obj.timer);
    // 获取当前位置
    var current = parseInt(getStyle(obj,attr));
    if(current > target){
        speed = -speed;
    }
    obj.timer = setInterval(function(){
        var oldValue = parseInt(getStyle(obj,attr));
        var newValue = oldValue + speed;
        if(speed < 0 && newValue < target){    
            newValue = target;   
        }
        
        obj.style[attr] = newValue + "px";
        if(newValue == target){
            clearInterval(obj.timer);
            callback && callback();
        }
        
    },30);
}
function getStyle(obj,name){
    if(window.getComputedStyle){
        return getComputedStyle(obj,null)[name];
    }else{
        return onj.currentStyle[name];
    }
}
    </script>

想要知道这是为什么呢？有什么改进办法吗？