为什么这里的imgList.style.left = 0 +"px"; 不生效?

在使用js实现html轮播图的时候想要在最后一张图的时候跳回第一张图,就是一直向右移动,但是设置imgList.style.left = 0 明明执行了却没生效,轮播到最后一张图片的时候会往回移动,像倒车一样。下面是页面代码

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #imgBox{
                width: 516px;
                height: 333px;
                background-color: greenyellow;
                padding: 8px 0;
                margin: 50px auto;
                overflow: hidden;
                position: relative;
            }
            #imgList{
                list-style: none;
                position: absolute;
            }
            #imgList li{
                float: left;
                padding: 0 8px;
            }
            #imgNav{
                position: absolute;
                bottom: 20px;
            }
            #imgNav a{
                width: 15px;
                float: left;
                height: 15px;
                background-color: pink;
                opacity:0.6;
                margin: 0 5px;
            }
            #imgNav a:hover{
                background-color:rgb(24, 136, 241);
            }
        </style>
        <script src="js/tool.js"></script>
        <script>
            window.onload = function(){
                var imgBox = document.getElementById("imgBox")
                var imgList = document.getElementById("imgList");
                var imgArr = document.getElementsByTagName("img");
                //设置imgNav的宽度
                imgList.style.width = imgBox.offsetWidth*imgArr.length + "px";

                var imgNav = document.getElementById("imgNav");
                //获取imgNav中所有的A
                var allA = document.getElementsByTagName("a");
                //设置imgNav居中
                //居中公式:(总体宽度 - 居中元素的宽度)/2
                imgNav.style.left = (imgBox.offsetWidth - imgNav.offsetWidth)/2 + "px";

                //设置默认索引为0
                var index = 0;
                //设置默认选择元素颜色
                allA[index].style.backgroundColor = "rgb(24, 136, 241)";
                //遍历数组allA,为所有的A绑定单击响应函数
                for(var i=0; i < allA.length; i++){
                    allA[i].num = i;
                    allA[i].onclick = function(){
                        index = this.num;

                        imgList.style.left= -516*index +"px";
                        move(imgList, "left", -516*index, 30, function(){
                            setA();
                        })
                    }
                }
                //调用自动切换函数
                autoChange();


                //设置选中a样式的函数
                function setA(){
                    //判断是否是最后一张图片
                     **if(index >= imgArr.length - 1){
                                        //是最后一张则跳为第一张
                         imgList.style.left = 0 +"px"; 
                                        //索引初始化
                         index = 0;
                                        //判断在网页中查看if是否执行
                         alert("初始化完毕");
                  } **
                    //将所有a初始化
                    for(var i = 0; i < allA.length; i++){
                        allA[i].style.backgroundColor = "";
                    }
                    //将选中的a变色
                    allA[index].style.backgroundColor = "rgb(24, 136, 241)";
                }

                //设置自动切换函数
                function autoChange(){
                    setInterval(function(){
                        index++;
                        index %= imgArr.length;
                        move(imgList, "left", -516*index, 30,function(){
                            setA();
                        })
                    },3000)
                }

            }
        </script>
    </head>
    <body>
        <div id="imgBox">  
            <ul id="imgList">
                <li><img src="img/01.jpg" ></li>
                <li><img src="img/02.jpg" ></li>
                <li><img src="img/03.jpg" ></li>
                <li><img src="img/04.jpeg" ></li>
                <li><img src="img/05.jpg" ></li>
                <li><img src="img/01.jpg" ></li>
            </ul>
            <div id="imgNav">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
    </body>
</html>

下面是move函数的代码

  /* 
创建一个移动函数
    obj为调用的对象
    attribute为修改的属性
    target为最终目标
    speed为动作的速度
    callBack为回调函数
    */

function move(obj, attribute, target, speed, callBack){
    clearInterval(obj.timer);
    //获取当前obj属性
    var current = parseInt(getStyle(obj , attribute));
    //判断速度方向
    if(current>target){
        speed = -speed;
    }
    obj.timer = setInterval(function(){
        var oldValue = parseInt(getStyle(obj , attribute));
        var newValue = oldValue + speed;
        //判断函数是否达到目标位置
        if(speed > 0 && newValue >= target || speed < 0 && newValue <= target){
            //使对象停在目标上
            newValue = target;
            //关闭计时器
            clearInterval(obj.timer);
            callBack && callBack();
        }
        obj.style[attribute] = newValue + "px";
    },30)
}

function getStyle(obj , name){
    if(window.getComputedStyle){//判断兼容性
        return getComputedStyle(obj,null)[name];
    }else{
        return obj.currentStyle[name];
    }
}

图片说明

2个回答

imgList.style = "left:0px"
这样看看,另外f12看下css样式有没有被运用

是不是后来有执行了这句的原因啊?

obj.style[attribute] = newValue + "px";
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问