簡單的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); 
     }); 
    }); 
} 

應該工作。由於函數（）{}之間的代碼現在將在淡入淡出完成後執行。