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

Question

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

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

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

Answer 1

您需要更改幻灯片功能以更好地跟踪图像，这样应该可以工作：

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

小提琴

Answer 2

试试这个 ...

var interval;

function slide(){
    interval = setInterval(function(){
      $('.fadein1 :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein1');}, 
      3000);
  });

  $(function(){

    $('.fadein1').hover(function(){
        clearInterval(interval);
    },function(){
      slide();
    });

    $('.fadein img:gt(0)').hide();
    slide();

  }

Answer 3

当你想这样做时，你通常只需设置一个信号量来说“嘿，我暂停了”。然后，在你的 setInterval 函数中，你说 if(paused) {return;} 并且只有在没有暂停时才继续。