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

Question

我在暂停图像时有点困难，因此它被渲染了。 我将图像存储在array偶数索引中（例如：2、4、6）。 并使用for loop ，我想每2秒更改一次图像。 在HTML页面的负载上，我onLoad = executeOnLoad() in 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

我为您创建了一个小提琴，可以显示偶数。 我使用了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 2

看到此代码，进行一些小的更改。 间隔内没有循环，只有一个动作。 每次调用setInterval回调时（即每隔一秒钟），它就会进一步前进一步，直到达到所需的最大长度（即7，但应该为contentArray.length ），然后间隔会自行清除。 由于可以在声明var interval = window.setInterval(...)时保存对它的引用（ 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 3

您的代码中没有暂停。 该循环仅遍历您的所有图像，因此只有最后一个会“粘住”。

您可以使用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 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"/> 

在JSFiddle上查看工作示例