JavaScript顯示imgs一個一個間隔

我有下面的圖像，我試圖讓他們一個接一個地間隔3秒，但我無法得到它的工作。它繼續留在0和不顯示圖像，幫助將是不錯：JavaScript顯示imgs一個一個間隔

<img src="one.png"></img> 
<img src="two.png"></img>

的javascript：

window.animate = function(){ 
    var timer = ''; 
    var imgs = document.getElementsByTagName('img'); 
    for (var i = 0; i < imgs.length; i++) { 
     var timer = setInterval(function(){ 
      alert(i); 
      imgs[i].style.display = 'block'; 
     }, 3000); 
     if(i == imgs.length){ 
      clearInterval(timer); 
     } 
    } 
}

來源

2015-11-10 anmo

這可能是你在找什麼：

window.animate = function(){ 
    var imgs = document.getElementsByTagName('img'); 
    var index = 0; 
    var timer = setInterval(function() { 
     // Hide all imgs 
     for (var i = 0; i < imgs.length; i++) 
      imgs[i].style.display = 'none'; 
     // Display next img 
     imgs[index].style.display = 'block'; 
     index++; 
     // Stop after all displayed. 
     if (index >= imgs.length) 
      clearInterval(timer); 
    }, 3000); 
}

來源

2015-11-10 18:22:25 TbWill4321

首先看到您的答案，並像魅力一樣工作:)。 – anmo

由於這些基本上都是同時超時，所以您需要在間隔中實現回調模式以觸發下一個回調模式，或者您需要增加每個索引的時間間隔;即將定時器的間隔設置爲3000 *（i + 1），這將有效地在延遲加上前一延遲時觸發下一個。但是，這並不代表實際的圖像加載。另外，我會考慮使用setTimeout，因爲你只需要這樣做一次。

var img = $('img.targets'); 
 
for (var i=0;i<img.length;i++) { 
 

 
    var duration = 3000; 
 
    setTimeout(function() { 
 
    // do dom work here 
 
    }, duration*(i+1)); 
 

 

 
}

來源

2015-11-10 18:22:52 Scorpius

下面是做到這一點的一種方法：

小提琴：http://jsfiddle.net/aecuappp/

HTML：

<img src="http://placehold.it/350x150"></img> 
<img src="http://placehold.it/350x150"></img> 
<img src="http://placehold.it/350x150"></img> 
<img src="http://placehold.it/350x150"></img> 
<img src="http://placehold.it/350x150"></img> 
<img src="http://placehold.it/350x150"></img>

JS：

var imgs = document.getElementsByTagName('img'); 
var interval = 3000; 
for (var i = 0; i < imgs.length; i++) { 
    (function (index, time) { 
     setTimeout(function() { 
      imgs[index].style.display = 'block'; 
     }, time); 
    } (i, interval)); 
    interval = interval + 3000; 
}

CSS：

img { 
    display: none; 
}

基本上你可以，如果你想第一圖像立即顯示開始interval爲0。每次它增加3秒到超時時間，因爲這些都是大致同時創建的。我將setTimeout包裝在一個IIFE中，以便在超時需要創建超時時的值時爲interval和index範圍。

來源

2015-11-10 18:25:30 AtheistP3ace

你可以通過使用setTimeout排隊一些超時，然後確保你是correctly passing the value of i來完成這個功能。您可以使用forEach代替常規循環輕鬆完成：

window.animate = function() { 
    var imgs = document.getElementsByTagName('img'); 

    imgs.forEach(function(img, i) { 
     setTimeout(function() { 
      img.style.display = 'block'; 
     }, (i + 1) * 3000); 
    }); 
};

來源

2015-11-10 18:26:15

JavaScript顯示imgs一個一個間隔

回答

相關問題