所以我有这个代码:
$(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()返回一个间隔 ID,您可以使用 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();
});
关于jQuery : pause slideshow on hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10912495/