jQuery:在悬停时暂停幻灯片放映 [英] jQuery : pause slideshow on 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()函数以使幻灯片在悬停时暂停?

that works 100% fine.. where do i add the .hover() function for the slideshow to pause on hover??

推荐答案

方法 setInterval() 返回一个intervalID，您可以使用 clearInterval( ).

Methods setInterval() returns a intervalID that you can use to clear the current interval/timeout using 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:在悬停时暂停幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！