简单的jquery照片幻灯片

我想编写自己的幻灯片脚本但最终结果是它立即跳转到图像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); 

slideShow（）immidiatly再次执行slideShow（）函数。 尝试将其替换为：

 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); }); }); } 

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