为什么JavaScript中的这个简单的幻灯片工作？

Question

我有下面的简单幻灯片脚本，但它只显示最后一张图片。为什么不显示每个图像之间有2500毫秒的中断？

window.onload = myFunction; 

var interval = 2500; 
var i = 0; 
var images = ["1.png","2.png","3.png","4.png"]; 
var description = ["image1", "image2" , "image3" , "image4"]; 

function myFunction() { 

    function setAttribute (number) { 
     document.getElementById("image").src = images[number]; 
     document.getElementById("me").innerHTML = description[number]; 
    } 

    function changeAttribute() { 
     while (i < 4) { 
      setAttribute(i); 
      i++; 
     } 
    } 

    setInterval(changeAttribute, interval); 
} 

Answer 1

你有while循环，这意味着你在每个选项都运行在一次迭代;如果您在重置时重置i = 0，则会产生无限循环。

使用setInterval()要做到这一点，而不是：对于第一时间区间通话throught所有图像

window.onload = myFunction; 

var interval = 2500; 
var i = 0; 
var images = ["1.png", "2.png", "3.png", "4.png"]; 
var description = ["image1", "image2", "image3", "image4"]; 

function myFunction() { 
    setInterval(changeAttribute, interval); 

    function setAttribute(number) { 
     document.getElementById("image").src = images[number]; 
     document.getElementById("me").innerHTML = description[number]; 
    } 

    function changeAttribute() { 
     setAttribute(i); 

     if (i < 3) { 
      i++; 
     } else { 
      i = 0; 
     } 
    } 

} 

http://jsfiddle.net/6LQpu/

Answer 2

你changeAttribute周期和停止最后的图像上。因为在变量i的值为4之后，没有其他事情发生在之后。您必须为每个间隔呼叫设置具有当前值的属性并将该值更改为下一个索引。您可以使用模运算符来循环0..images-1内的值。

function changeAttribute() { 
    setAttribute(i); 
    i = (i+1) % images.length; 
}