jquery - 鼠标悬停以暂停图像幻灯片放映

我有一个可以运行的图像幻灯片，但是我需要制作一个幻灯片，以便当您用鼠标滑过时，幻灯片会在特定图像处停止，然后在释放时再次启动幻灯片。.这是我的功能：

$(function(){
$(this).mouseover(function(){
    $(this).toggle();
});
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein1 :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein1');},
  3000);
  });

有人可以帮忙吗？现在真的很烦我。

最佳答案

您需要更改幻灯片显示功能以更好地跟踪图像，类似这样的方法应该起作用：

$(function(){
    var timer, elm=0, images = $('img', '.fadein1');
    images.not(':first').hide().end().on({
         mouseenter: function() {
             clearInterval(timer);
         },
         mouseleave: function() {
             timer = setInterval(slider, 3000);
         }
   });

   timer = setInterval(slider, 3000);

   function slider() {
     var image = images.eq(elm);
     image.fadeOut();
     elm = elm!=images.length-1 ? image.next('img').index() : 0;
     images.eq(elm).fadeIn();
   }
 });​

FIDDLE

关于jquery - 鼠标悬停以暂停图像幻灯片放映，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10466254/