jquery - 悬停滑块上的jQuery暂停

Question

我这里的滑块有问题。当我悬停滑块时，我想暂停它。不幸的是，我不明白这一点。有任何想法吗？更新到 jsFiddle 的链接：http: //jsfiddle.net/fZYK4/

$(function(){
    var slide = $('.productSlide');
    $('.productSlider ul').removeClass('displaynone');

    slide.not(':first').hide();
    $('.productSlider ul a:first').addClass('active');
    $('.productSlider ul a').on('hover', function(e){
        e.preventDefault(false);
        var target = $(this).attr("href");
        $('.productSlider ul a').removeClass('active');
        $(this).toggleClass('active');
        slide.not('#'+target).hide();
        $(target).show();
    });
    var counter = 0;
        if( slide.length > 1 ){         
            slide.hide();
            slide.first().show();
            setInterval(function() {
                slide.eq(counter).hide();
                counter++;
                if (counter == slide.length) {
                    counter = 0;
                }
                slide.eq(counter).show();
                $('.productSlider ul a').removeClass('active');
                $('.productSlider ul a').eq(counter).toggleClass('active');
            }, 5000);           
        };
});

Answer 1

你必须分配你正在设置的时间间隔

var counter = 0;
var myInterval;
if ( slide.length > 1 ) {
  slide.hide().first().show();
  myInterval = setInterval(function() {
   // ... and so on

并在悬停时清除它

$('.productSlider ul a').on('mouseenter', function(e){
  clearInterval(myInterval);
  // ... and so on

如果你想在用户悬停时重置，你最好包装这个函数：

function doAnimation() {
            return setInterval(function() { 
              slide.eq(counter).hide();
              counter++;
              if (counter == slide.length) {
                counter = 0;
              }
              slide.eq(counter).show();
              $('.productSlider ul a').removeClass('active');
              $('.productSlider ul a').eq(counter).toggleClass('active');
            }, 5000);
        }

并在您希望它开始的地方调用它，例如在 mouseleave 上：

$('.productSlider ul a').on('mouseleave', function(e){
   myinterval = doAnimation();