javascript - 在 setTimeInterval 方法中显示 Javascript 数组中的图像

Question

我在暂停图像时遇到了一点困难，因此它被渲染了。我将图像存储在数组的偶数索引中(例如:2、4、6)。使用 for 循环，我想每 2 秒更改一次图像。在加载 HTML 页面时，我在 HTML 中调用 onLoad =executeOnLoad()。图像从默认值更改为第六个索引中的图像，但此后它不再改变。尽管控制台显示 i 正在更改，但它仍保留在同一索引上。

function executeOnLoad(){
    for(var i = 0; i < 7; i++){
        if (i%2 == 0) {
            console.log("started.."+i);
            displayImage(i);
        }

    }
}

function displayImage(i){
    console.log("displaying...." + i);
    document.getElementById("initial_image").src = contentArray[i];
}

window.setInterval("executeOnLoad()", 1000);

这是控制台输出，每 1 秒重复一次，但图像没有变化:

started..0
displaying....0
started..2
displaying....2
started..4
displaying....4
started..6
displaying....6 < ---- The image here is displayed but, not changing to other..

感谢您的帮助。谢谢。

Answer 1

我为你创建了一个显示偶数的 fiddle 。我使用了 if 语句而不是您的 for 循环，因为那样会一次性运行所有循环。

在这里查看它的工作情况:

var contentArray = ["0.png","1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png"]

var i = 0;
var numberOfImagesToDisplay = 6;
var speedOfAnimation = 1000;

function executeOnLoad(){
    if(i <= numberOfImagesToDisplay){
        if (i%2 == 0) {
            displayImage(i);
            i = i+2;
        } else {
            i++;
        }
        
    } else {
        i=0;
        displayImage(i);
    }
}

function displayImage(img){
    document.getElementById("initial_image").src = "http://www.marcelogil.com/fiddle/jsloop/" + contentArray[img];
}

window.setInterval("executeOnLoad()", speedOfAnimation);  

<img src="http://www.marcelogil.com/fiddle/jsloop/0.png" id="initial_image" />