轮播图第一张图片切换没有过度效果，第二张开始才有效果，怎么解决求指导

Question

#轮播图第一张图片切换没有过度效果，第二张开始才有效果，怎么解决求大佬指导

* {
    padding: 0;
    margin: 0;
}

img {
    width: 540px;
    /* border: #FF0000 1px solid; */
}

#outer {
    width: 540px;
    height: 540px;
    margin: 50px auto;
    background-color: #bfa;

    line-height: 0;
    position: relative;
     overflow: hidden; 
    /* border: #FF0000 1px solid; */

}

#imgList {
    list-style: none;
    position: absolute;
    transition: all 1s ;
    /* border: #FF0000 1px solid; */
}

#imgList li {
    float: left;
    /* margin: 0 10px; */
}
#navDiv{
    position: absolute;
    top: 500px;
    
}
#navDiv a{
    /* display: block; */
    float: left;
    width: 20px;
    height: 20px;
    background-color:red ;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.5;

    
}
#navDiv a:hover{
    background-color: black;
    
}

window.onload = function() {
    //设置imgList width；
    var imgList = document.getElementById("imgList");
    var imgArr = document.getElementsByTagName("img");
    imgList.style.width = 540 * imgArr.length + "px";

    // 设置导航按钮居中
    var outer = document.getElementById("outer");
    var navDiv = document.getElementById("navDiv");
    navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

    // 默认显示图片的索引
    index = 0;
    var allA = document.getElementsByTagName("a");
    allA[index].style.backgroundColor = "black";

    //点击超链接切换到指定的图片；
    for (var i = 0; i < allA.length; i++) {
        allA[i].num = i;
        allA[i].onclick = function() {
            index=this.num;
            imgList.style.left=-540*index+"px";
            setA();
        }
        
    }
    function setA(){
        for (var i = 0; i < allA.length; i++) {
            allA[i].style.backgroundColor="";
        }
        allA[index].style.backgroundColor="black";
    }
}

Answer 1

没有设置初始imgList.style.left，导致第一次点击事件是设置样式而不是修改样式，所以第一次点击没有过度效果