0

テスト Web ページの小さなスライドショーを作成しようとしています。なぜこのコードが機能しないのか、私は混乱しています (私は JavaScript の経験があまりなく、主に Java を扱っています。Javascript はかなりイライラするものです)。また、実行を開始し、数秒後に 3 番目の画像に切り替わり、停止して二度と切り替わらないことを追加したいと思います。

var backgroundElement = document.getElementById("innerContent");
var minibarImage1 = document.getElementById("pic1");
var minibarImage2 = document.getElementById("pic2");
var minibarImage3 = document.getElementById("pic3");


minibarImage1.onmouseover = function(){
    backgroundElement.style.backgroundImage="url('images/frontpage/maintenance_01.jpg')";
};

minibarImage2.onmouseover = function() {
    backgroundElement.style.backgroundImage ="url('images/frontpage/natural_steps_01.jpg')";
};

minibarImage3.onmouseover = function() {
    backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";
};

function slideshow() {
setTimeout(function(){backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')";}, 2000);
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')";}, 2000);
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";}, 2000);
}   


 window.onload = setInterval(function(){slideshow();}, 8000);
4

2 に答える 2

3

私がすでに指摘したように：

window.onload = setInterval(function(){slideshow();}, 8000);

次のようにする必要があります。

window.onload = function(){
    setInterval(function(){slideshow();}, 8000);
}

window.onload関数を格納します。setInterval間隔の ID を返します - 停止を選択できるようにします。

また、setTimeoutプログラムの実行を一時停止しません。したがって、setTimeoutall への連続した呼び出しは、呼び出しの 2 秒後に同時に実行されslideshowます。

次のように、コールバック関数をネストしてみることができます。

function slideshow (){

    setTimeout(function(){
        backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')";
        setTimeout(function(){
            backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')";
            setTimeout(function(){
                backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";
                slideshow();
            },  2000);
        },  2000);
    },  2000);
}

slideshow();

おそらくもっとエレガントな方法がありますが、要点はわかります。

編集：

これはより優雅かもしれません：

function slideshow() {
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 2000);
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 4000);
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 6000);
    setTimeout (slideshow, 8000);
}

setTimeout秒を 2 で置き換えます。一連の URL に対して関数を反復処理できるように、URL の配列と時間ステップ引数を追加することで、スライドショー関数をもう少しモジュール化することもできます。

このような並べ替え（疑似コード）

function slideshow (urls, timestep){
    var i = 0;
    for (; urls[i]; i++)
        setTimeout (function(){ backgro... = urls[i];}, timestep * i);

    setTimeout (slideshow, timestep * i);
}

slideshow (["url1", "url2", "url3"], 2000);
于 2013-06-10T06:05:06.310 に答える
1

3番目のスライドショーのみが表示されることについて：

setTimeout他のコードの実行をスケジュールした直後に戻る呼び出し。

したがって、あなたのslideshow機能では、あなたは

  1. 最初のスライドが 2 秒で表示されるようにスケジュールする
  2. 次に、2 番目のスライドが 2 秒で表示されるようにすぐにスケジュールします。
  3. 次に、すぐに 3 番目のスライドを 2 秒で表示するようにスケジュールします。

2 番目のスライドは 1 番目のスライドのナノ秒後に表示され、3 番目のスライドは 2 番目のスライドのちょうどナノ秒後に表示されます。3 番目のスライドが表示されていることしか認識できません。

編集

スライドショーに使用できる一般的なアプローチを次に示します。(これを行うことができるライブラリがいくつかあることに注意してください。ただし、これは実際には JavaScript を学習するための非常に優れた演習です。)

まず、カウンターを使用して画像を循環するようにスライド ショーを構成します。プロの JavaScript では、カウンターをクロージャーでラップして、グローバル名前空間を汚染しないようにします。

var slideshow = (function () {
    var images = [
        'images/frontpage/maintenance_01.jpg',
        'images/frontpage/natural_steps_01.jpg',
        'images/frontpage/twnshp_bdg_01b.jpg'
    ];
    var index = 0;
    return function () {
        backgroundElement.style.backgroundImage= "url(" + images[index] + ")";
        index = (index + 1) % images.length;
        setTimeout(slideshow, 2000);
    }
}());

これで、すべてを開始するのに 8 秒も待つ必要はありません。これで逃げることができます：

window.onload = slideshow;

ここには括弧がないslideshowことに注意してください。呼び出しの結果を に代入したくないためonload、onload 関数を にしたいからです slideshow。

于 2013-06-10T06:04:12.693 に答える