ホバーでスライドショーを一時停止する

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

あなたが間隔を削除するclearInterval()を使用することができます.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

を使用することができます。

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例：