Javascript显示一个接一个带有间隔的img

Javascript show imgs one by one with interval

本文关键字：一个 img 显示 Javascript      更新时间：2023-09-26

我有下面的图像，我试图以3秒为间隔逐一显示它们，但我无法完成。它继续停留在0上，并且不显示图像，这将是一个很好的帮助：

<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);
       }
   }
}

这可能就是您想要的：

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);
}

这里有一种方法：

Fiddle：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;
}

基本上，如果您希望第一个图像立即显示，您可以在0启动interval。每次它都会增加3秒的超时时间，因为这些时间都是大致同时创建的。我将setTimeout封装在IIFE中，以便为interval和index提供超时需要的范围，即我们创建超时时的值。

由于这些基本上都是同时超时的，因此需要对间隔实现回调模式以触发下一个间隔，或者需要增加每个索引的间隔；即，将计时器的间隔设置为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));
}

您可以通过使用setTimeout排队等待一些超时，然后确保正确地将i的值传递给中的函数来实现这一点。通过使用forEach而不是常规循环，可以很容易地做到这一点：

window.animate = function() {
    var imgs = document.getElementsByTagName('img');
    imgs.forEach(function(img, i) {
        setTimeout(function() {
            img.style.display = 'block';
        }, (i + 1) * 3000);
    });
};
相关文章：