画像が変更されない

Question

こんにちは画像を変更して下のコードを使用して画像を点滅させようとしています。私の "setTimeout"に何か問題がありますか？ TIA

var Test = new Array(); 
Test.length = 2; 

for (var i = 0; i < Test.length; i++) { 
    Test[i] = new Image(); 
    Test[i].src = "images/Image2" + (i+1) + ".png"; 
} 

function ChangeImage() { 
    for (var i = 0; i < Test.length; i++) { 
     document.getElementById('Test_Image').src = Test[i].src; 
    } 
    setTimeout("ChangeImage()", 1000);   
} 

ChangeImage(); 

Answer 1

まずは新しいImage（）部分で自分を複雑にしました。あなたはTest [i] = "images/Image2" +（i + 1）+ ".png"を使うことができます。

コードでは、まず、1秒に1回、本当に速くイメージを変更します。

それはこのようなものでなければなりません：これは、任意の時点でJavaScriptコードを停止しません

function ChangeImage() { 
    for (var i = 0; i < Test.length; i++) { 
     setTimeout(function(){document.getElementById('Test_Image').src = Test[i]; 
     }, (i+1) *1000);  
    }  

    if(play){ 
    setTimeout("ChangeImage()", Test.length * 1000);   
    } 
} 

。

1秒後にimage21を2秒後に置くとimage21となり、もう一度自分自身を呼び出すと再び開始されます。

私はあなたが望むならば、あなたがアニメーションを止めることができるように変数の再生を入れます。

Answer 2

このようなものを試してみてください。

を編集します。setIntervalの代わりにsetTimeoutを誤って入力します。それを指摘してくれたSantiに感謝します。

var Test = new Array(); 
Test.length = 2; 

for (var i = 0; i < Test.length; i++) { 
    Test[i] = new Image(); 
    Test[i].src = "images/Image2" + (i+1) + ".png"; 
} 

var count = 0; 

function ChangeImage() { 
    if (count >= Test.length) 
    count = 0; 
    document.getElementById('Test_Image').src = Test[count].src; 
    count++; 
} 

setInterval(ChangeImage, 1000); 

Answer 3

setTimeout()はブロックしていません。つまり、将来的に何らかのアクティビティーが発生するようにスケジュールするだけで、残りのJavascriptは実行し続けることを意味します。したがって、今から1秒後には全く同じ時刻にTest.lengthsetTimeout()をスケジュールしていました。代わりに、次の画像の変更をスケジュールする必要があります。その後、そのタイマーが起動すると、それ以降のスケジュールをスケジュールします。

あなただけの1秒間隔で様々な画像を順番にしたい場合は、あなたがこれを行うことができます：

function ChangeImage() { 
    var cntr = 0; 

    function next() { 
     if (cntr < Test.length) { 
      document.getElementById('Test_Image').src = Test[cntr++].src; 
      // after changing src, schedule next change for 1 second from now 
      setTimeout(next, 1000); 
     } 
    } 
    // start first iteration 
    next(); 
} 

ChangeImage(); 

ます。またとき、彼らはすぐに表示されるように、すべての画像が適切にプリロードされていることを確認する必要があるかもしれませんソースを設定します。これらのような回転を開始する前に、必ずプリロードが行われるようにする数多くの方法があります。

Image preloader javascript that supports events

How do you cache an image in Javascript

Answer 4

あなたforループはsrcが一度、すぐに戻ってそれを切り換えスイッチ、そうすることができます」それが変わるのを見てください。代わりにこれを試してください：

var Test = []; 

for (var i = 0; i < 2; i++) { 
    Test.push("images/Image2" + (i+1) + ".png"); 
}; 

var x = 0; 
document.getElementById('Test_Image').src = Test[x]; 

(function ChangeImage() { 
    if(++x >= Test.length) x = 0; 
    document.getElementById('Test_Image').src = Test[x]; 
    setTimeout(ChangeImage, 1000); 
})(); 

編集：Santiが指摘したように、私のオリジナルのソリューションは2つの画像のみをサポートしていましたが、OPは配列をループするよう要求しました。