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