호버에서 슬라이드 쇼 일시 중지

Question

슬라이드 쇼를 실행하려면 다음 스크립트가 필요합니다.

jQuery(document).ready(function ($) { 


setInterval(function() { 
    moveRight(); 
}, 5000); 


var slideCount = $('#slider ul li').length; 
var slideWidth = $('#slider ul li').width(); 
var slideHeight = $('#slider ul li').height(); 
var sliderUlWidth = slideCount * slideWidth; 

$('#slider').css({ width: slideWidth, height: slideHeight }); 

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

$('#slider ul li:last-child').prependTo('#slider ul'); 

function moveLeft() { 
    $('#slider ul').animate({ 
     left: + slideWidth 
    }, 500, function() { 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 

function moveRight() { 
    $('#slider ul').animate({ 
     left: - slideWidth 
    }, 500, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 

$('a.control_prev').click(function() { 
    moveLeft(); 
}); 

$('a.control_next').click(function() { 
    moveRight(); 
}); 
}); 

는 그러나 나는 마우스를 가져가 일시 중지하려면, 나는 (아래 포함) 내가 SO에 여기 몇 가지 다른 제안을 시도했지만, 그 중 하나는 코드 작업을 만들 수 없습니다 나는 가지고있다. 아이디어가 있으십니까? 감사.

$("#slider ul").mouseover(function() { 
$("#slider ul").trigger('pause', true); 
}); 

Answer 1

당신은 .stop() 사용할 수 clearInterval()

// define reference to `setInterval()` call 
var interval = setInterval(function() { 
    moveRight(); 
}, 5000); 

// stop animations, clear `interval` 
$("#slider ul").mouseover(function() { 
    $(this).stop(); 
    clearInterval(interval); 
}); 

Answer 2

당신은 간격을 제거 clearInterval()를 사용할 수 있습니다.

Answer 3

희망이 도움이 :

var timerObject=null; 

function StartSlide(){ 
timerObject = setInterval(function() { 
    moveRight(); 
}, 5000); 
} 

function stopSlide(){ 
clearInterval(timerObject) 
} 

$("#slider ul").mouseover(function() { 
stopSlide() 
}); 

$("#slider ul").mouseleave(function() { 
StartSlide() 
}); 

Answer 4

.stop() | jQuery API 

JSfiddle는 예 :