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

，并调用它，你想让它开始，例如在鼠标离开：

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