0

50 秒ごとに変化する 2 つの画像を表示したいと考えています。各画像は 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 でのソリューションが必要です。delayjQuery を使用すると、またはその他の魔法を簡単に使用できます。

誰かが私の要件を達成する方法を教えてもらえますか?

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 から開始します。2 つの画像の場合、これは 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 に答える