Question

我想要显示两张应该每50秒更换一次的图像。每张图像应显示120秒。

window.onload = function() {
    var dir = "0";
    setInterval(function () {
        var element = document.getElementById("maincontainer");           
        if(element.style.display == "none") {
            if(dir == "1") {
                dir = "0";  
            } else {
                dir = "1";  
            }               
            loadNewImages(dir); 
            element.style.display = "block";
        } else {
            element.style.display = "none";
        }
    }, 50000);

一些带有div容器的简单HTML代码：

<div id="maincontainer">
 <img src="myimage.png" />
</div>

我试着玩：

setTimeout(function() {
   element.style.display = "none"; 
}
), 
120000)

但这不起作用。

我需要一个简单的JavaScript解决方案。使用jQuery，我可以简单地使用delay或其他魔法。

有人能给我一个提示如何达到我的要求吗？

Answer 1

我建议使用循环模式。这是a demo（使用1.2秒来节省1.98分钟）。

var images = document.getElementsByTagName("img");

我们将它包装在一个闭包中，这样我们就可以控制i变量。

(function(){
    var i = 0;

我们在间隔中做的第一件事就是隐藏当前图像，即图像[i]。

    setInterval(function(){
        images[i].style.display = "none";

我们检查并查看i + 1是否是有效图像。您也可以将其写为images[i+1] != null。如果我们能增加它，我们就可以。否则我们从0开始。有两个图像在0和1之间切换。有5个图像，它循环0,1,2,3,4,0,1,2 ......

        if (i+1 < images.length) {
            i++;
        }
        else {
            i = 0;
        }

显示我们的新图片。当计时器再次运行时，这将是image [i]，因此它将被隐藏。

        images[i].style.display = "inline-block";
    }, 120000);
})();

在特殊时间段内隐藏和显示图像一段时间

1 个答案: