js图片轮播为什么这样不能循环？

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ width: 400px; height: 300px; box-shadow: 2px 3px 2px gray; } </style> </head> <body> <img src="img/1.jpg" id="myImg" /> <script type="text/javascript"> var myImg = document.getElementById("myImg"); var imgs=["1.jpg", "2.jpg", "3.jpg","4.jpg", "5.jpg","6.jpg", "7.jpg", "8.jpg"]; var intervalID = setInterval(chgImg,1000); function chgImg(){ for(var i=0;i<imgs.length;i++){ myImg.src="img/"+imgs[i]; } } </script> </body> </html>

查看完整描述

4 回答

已采纳

winner4265975

TA贡献19条经验获得超17个赞

            var i=0;
            var len=imgs.length;
            function chgImg(){
                if(i>=len);i=0
                myImg.src="img/"+imgs[i];
                i++;
                }

加个判断就好！

如果不要全局变量的的话用闭包!

            function chgImg(){
                var i=0;
                var len=imgs.length;
                return (function(){
                      if(i>=len);i=0
                        myImg.src="img/"+imgs[i];
                        i++;
                    })
                }

1 反对回复 2017-05-28

慕运维2284031

TA贡献11条经验获得超2个赞

题主的算法在一次定时器溢出时进行了一次数组的循环导致的结果就是再一次定时器溢出时改变了数组长度次数的图片URL地址每次都停留在最后一张图片上正确的做法是取消for循环每次定时器溢出时i加一后对数组长度取余(比如数组长度是4 当i等于四时也就是第五张取余等于0 是第一张) 需要注意 i要在定时器外定义(否则每次定时器溢出都会重新定义i)

1 反对回复 2017-05-29