hover时暂停幻灯片放映

我有以下脚本来运行幻灯片，这很好用。

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

但是我希望它暂停鼠标hover，我已经尝试了一些我在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示例：