jQuery：在hover时暂停幻灯片
所以我有这个代码：
$(document).ready(function(){ $("#slideshow > div:gt(0)").hide(); setInterval(function() { $("#slideshow > div:first") .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo("#slideshow"); }, 3000); }); 100％正常工作..我在哪里添加.hover()函数幻灯片放映暂停？
方法setInterval（）返回一个intervalID，您可以使用clearInterval（）清除当前间隔/超时。
你可以这样做：
$(document).ready(function() { var timer; $("#slideshow > div:gt(0)").hide(); $("#slideshow") // when mouse enters, clear the timer if it has been set .mouseenter(function() { if (timer) { clearInterval(timer) } }) // when mouse goes out, start the slideshow .mouseleave(function() { timer = setInterval(function() { $("#slideshow > div:first") .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo("#slideshow"); }, 3000); }) // trigger mouseleave for initial slideshow starting .mouseleave(); });
DEMO