在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上查看工作示例