懸停幻燈片

Question

我想要一個特定的幻燈片停止，因爲我將鼠標懸停在上面。

的JavaScript代碼我想：

$(".rotate-slider").hover(function() { 
    $(this).find(".rotate-slider").stop(true, true).fadeOut(); 
}, function() { 
    $(this).find(".rotate-slider").stop(true, true).fadeIn(); 
}); 

還我試圖用CSS來得到它：

.rotating-slide:hover .slider 
{ 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
} 

不幸的是，沒有上面的代碼似乎工作。

Answer 1

您可以點擊這裏更新的代碼：jsfiddle.net/bharatsing/mqv1w538/8/

您需要用戶clearInterval時，懸停和需要懸停了重新初始化它

$(".rotate-slider li").hover(function() {  
    clearInterval(rotateInterval); 
}, function() { 
    rotateInterval = window.setInterval(function(){ 
       if(!rotateSlider.slidesContainer.hasClass('animate')){ 
        rotateSlider.slidesContainer.addClass('animate') 
       } 
       currentRotation = currentRotation - rotateSlider.slideAngle; 
       rotateSlider.slidesContainer.css('transform', 'translateX(-50%) rotate('+currentRotation+'deg)'); 
      }, 4000); 
});