Javascript 一张一张显示图片,间隔

标签 javascript html

我有下面的图像,我试图以 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);
}

关于Javascript 一张一张显示图片,间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33636834/

相关文章:

javascript - 跨多个用户使用 IndexedDB 数据

javascript - 关于 Bootstrap 2 和 jQuery 1.7.2 的困惑

javascript - jquery灯箱问题

javascript - 更改单击数据绑定(bind)时显示的纸张选项卡 - Polymer

javascript - ExtJS + IE10脚本执行顺序问题

javascript - 使用 jquery、froogaloog 和 wordpress 控制 Vimeo iframe 时遇到问题

html - Article>p+time - 文章是否太短?

Chrome 和 Firefox 之间的 HTML 范围元素垂直位置差异

javascript - .html 和 .text 不起作用

php - 简单的 PHP 不填充页面