js 结果不循环怎么回事，不能实现走马灯的效果 - 编程论坛

#2

欧阳振永2014-08-19 21:40

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title></title>
    <style>
        #picture{
            height:400px;
            width:400px;
            line-height: 400px;
            margin:0 auto;
           overflow: hidden;
          }
    </style>

</head>
<body onload="setTimeout()">
<div id="picture">
    <img src="1.jpg" id="tu" alt=""/>
</div>
<script type="text/javascript">
   var a=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
    var i=0;
  function  huan(){
         if(i== a.length-1){
             i=0;
         }
         else{
             i++
         }

         document.getElementById("tu").src=a[i];

     }

setInterval(huan,3000);

</script>

</body>
</html>

正确代码

#3

Paxster2014-08-22 09:51

setTimeout()只能执行一次huan()函数，需要换成setinterval(),可以不停的执行该函数；其次，不能在huan()函数内部调用定时器，需要在外部调用huan()函数。楼上的代码是对的。吐槽一句，楼主的这种写法已经out很多年了...

#4

渴望做梦2015-02-11 16:50

回复 3楼 Paxster

如果我写，估计也这么写，现在都用什么新的方法写啊？

#5

冰镇柠檬汁儿2015-03-11 15:33

方式一：
var a = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'], i = 0;
var timer = setInterval(function () {
    i++;
    document.getElementById("tu").src = a[i];
    if (i >= a.length - 1) {
         clearTimeout(timer);
    }
}, 3000);
方式二：
var a = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'], i = 0;
function setNewInterval() {
    i++;
    document.getElementById("tu").src = a[i];
    if (i < a.length) {
        setTimeout(arguments.callee, 1000);
    }
};
setTimeout(setNewInterval, 1000);
这两种方式第二种现在比较流行，因为setTimeout不用监控超时调用id，另外，多个setInterval的时候，不能准确预估哪个先启动，可能造成不可知的结果
代码只是随手写的，不一定正确，大概意思是这样的