1

以下のコードを参照してください...ページの読み込み+8秒後に画像が変更され、その後1秒ごとに変更され続けます。

setInterval(function(){
    setTimeout(function(){
         $('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg');

         setTimeout(function(){
             $('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg');

             setTimeout(function(){
                 $('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg');

                 setTimeout(function(){
                     $('#person1').attr('src', 'lastwavewinnerimages/45234.jpg');

                     setTimeout(function(){
                         $('#person1').attr('src', 'lastwavewinnerimages/14134.jpg');

                         setTimeout(function(){
                             $('#person1').attr('src', 'lastwavewinnerimages/124t234grq.jpg');

                             setTimeout(function(){
                                 $('#person1').attr('src', 'lastwavewinnerimages/frbvqw34.jpg');

                                 setTimeout(function(){
                                     $('#person1').attr('src', 'lastwavewinnerimages/14tqwrbfws.jpg');
                                }, 1000);
                            }, 1000);
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 8000);

このループは8秒後に実行されます。ページが読み込まれた最初の1秒から開始するようにします。どうやってするの。

4

4 に答える 4

7

setInterval は、関数が最初に呼び出される前に 8000 が経過するのを待ちます。また、次のようにコードをリファクタリングすることもできます。

$(function(){
    var images = ['lastwavewinnerimages/wtrhwt.jpg',
                'lastwavewinnerimages/t8yejty.jpg',
                'lastwavewinnerimages/t2tgw8.jpg',
                'lastwavewinnerimages/45234.jpg',
                'lastwavewinnerimages/14134.jpg',
                'lastwavewinnerimages/124t234grq.jpg',
                'lastwavewinnerimages/frbvqw34.jpg',
                'lastwavewinnerimages/14tqwrbfws.jpg'];
    var i = 0;

    function k() {
        $('#person1').attr('src', images[i % images.length]);
        i++;
    }

    setInterval( k, 1000 );
    k();
});
于 2012-11-15T10:29:47.777 に答える
1

別のアプローチとして、反復ごとにタイムアウトを設定することもできます。

(function() {
    var imagearray = ['lastwavewinnerimages/wtrhwt.jpg',
                                'lastwavewinnerimages/t8yejty.jpg',
                                'lastwavewinnerimages/t2tgw8.jpg',
                                'lastwavewinnerimages/45234.jpg',
                                'lastwavewinnerimages/14134.jpg',
                                'lastwavewinnerimages/124t234grq.jpg',
                                'lastwavewinnerimages/frbvqw34.jpg',
                                'lastwavewinnerimages/14tqwrbfws.jpg'];
    var i = 0; //credit goes to Esailija

    (function nextimg() {
        $('#person1').attr('src', imagearray[i++ % imagearray.length]);
        setTimeout(nextimg, 1000);
    })();
})();
于 2012-11-15T10:54:38.310 に答える
-1

ページの読み込み後に実行される Javascriptの複製

コードを window.onload イベントの下に置くだけです。ページがロードされた直後にコードが実行されます。イメージを変更すると、期待した結果が得られない場合があります。画像ソースを変更すると、画像の読み込みが開始されるためです。画像をプリロードすると、期待どおりの結果が得られます。画像をプリロードする 3 つの方法を次に示します。

画像をプリロードする 3 つの方法

于 2012-11-15T10:36:53.303 に答える
-2

setIntervalを使用する代わりに、このような再帰関数を記述します。

function loopImages() {
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg')", 1000);
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg')", 1000);
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg')", 1000);
   ..
   ..
   ..
   ..
   ..
   setTimeout("loopImages()",0);
}

onload = "loopImages（）"

于 2012-11-15T10:42:20.523 に答える