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()代替：

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

为什么这个简单的幻灯片在javascript中不起作用？

2 个答案: