為什么這個簡單的javascript幻燈片無法正常工作？

Question

我下面有簡單的幻燈片腳本，但它只顯示最后一張圖像。 為什么不顯示每個間隔2500ms的圖像？

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重置i = 0 ，則將發生無限循環。

使用setInterval()代替：

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; 
}