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

Question

我在暂停图像时遇到了一点困难，所以它被渲染了。我将图像存储在 array 的偶数索引中（例如：2、4、6）。使用 for loop，我想每 2 秒更改一次图像。在 HTML 页面加载时，我调用 onLoad = executeOnLoad() in HTML。图像从默认值更改为第六索引中的图像，但之后它没有改变。尽管它保留在同一个索引上，但控制台显示 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

查看此代码，进行一些小改动。间隔内部没有循环，而是一个动作。每次调用 setInterval 回调（即每隔一秒）时，它会更进一步，直到达到最大所需长度（即 7，但可能应该是 contentArray.length），然后间隔自行清除。清除间隔是可能的，这要归功于在声明它时保存对它的引用（var interval = window.setInterval(...) 并使用 clearInterval 方法。

var i = 0, interval;

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

    if (i >= 7) {
        clearInterval(interval);
    }
}

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

interval = window.setInterval(executeOnLoad, 1000);

Answer 2

您的代码中没有暂停。该循环会遍历所有图像，因此只有最后一个会 "stick".

您可以使用 settimeout:

来解决这个问题

console.clear();
document.body.innerHTML = '';
//START
var contentArray = [
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg'
]

var initImg = document.createElement("img");
initImg.id = "initial_image";
initImg.src = '';
document.body.appendChild(initImg);

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

    }
}

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

executeOnLoad();

Answer 3

我为您创建了一个显示偶数的 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" />

Answer 4

检查这个：

var i = 0;
    var contentArray = [];
    contentArray.push('https://img.utdstc.com/icons/256/beautiful-life-quotes-android.png');
    contentArray.push('https://img.utdstc.com/icons/monospace-android.png');
    contentArray.push('https://img.utdstc.com/icons/cloud-print-android.png');
    contentArray.push('https://img.utdstc.com/icons/120/desire-the-game-for-couples-android.png');
    
    function displayImage(){
        console.log("displaying...." + i);
        if(i < ((contentArray.length) - 1)){
         i++;
        }else{
         i = 0;
        }
        document.getElementById("initial_image").src = contentArray[i];
        window.setTimeout( displayImage, 4000);
    }
    
     displayImage();

<img id="initial_image"/>

见a working example on JSFiddle

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

Displaying image from array in Javascript in setTimeInterval method

html

javascript

jquery

user-interface

frontend