0

我想显示两个应该每 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或其他魔法。

有人可以给我一个提示如何实现我的要求吗？

4

1 回答 1

1

我建议使用循环模式。这是一个演示（使用 1.2 秒为您节省 1.98 分钟）。

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

我们将其包装在一个闭包中，以便我们可以控制我们的i变量。

(function(){
    var i = 0;

我们在区间内做的第一件事是隐藏当前图像，即 images[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);
})();
于 2013-08-21T07:52:30.290 回答