简单的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); 
     }); 
    }); 
} 

应该工作。由于函数（）{}之间的代码现在将在淡入淡出完成后执行。