簡単なjqueryの写真のスライドショー

Question

私は自分のスライドショースクリプトを書こうとしましたが、最終的な結果はすぐに画像6にジャンプし、激しくフラッシュします。 HTMLは画像ID = "ss1" 。

var i = 1; 

$(document).ready(function(){ 
    slideShow(); 
}); 
var t; 
function runSlideShow() { 
    if(i >= 7) i = 1; 
    $("#ss1").fadeTo("slow",0); 
    document.getElementById('ss1').src = "img/" + i + ".jpg"; 
    $("#ss1").fadeTo("slow",1); 
    i += 1; 
    t = setTimeout(slideShow(), 5000); 
} 

Answer 1

私は問題はあなたが

t = setTimeout(slideShow(), 5000); 

スライドショーを（使用していることだと思いますが）immidiatly再びスライドショー（）関数を実行します。次のように交換してください：

t = setTimeout('slideShow()', 5000); 

これはevalを使用していますが、これは安全ではない（この場合ではありません）と考えられ、遅いことに注意してください。

フェードはコード内で非同期に実行されるため、フェードは機能しません。これは、同時にフェードアウトしている間にフェードインしていることを意味します（明らかに奇妙な状況が発生します）。

function runSlideShow() { 
    if(i >= 7) i = 1; 
    $("#ss1").fadeTo("slow",0, function() { 
     document.getElementById('ss1').src = "img/" + i + ".jpg"; 
     $("#ss1").fadeTo("slow",1, function() { 
      i += 1; 
      t = setTimeout('slideShow()', 5000); 
     }); 
    }); 
} 

が有効です。 function（）{}のコードは、フェードが終了した時点で実行されるようになりました。