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;}と言い、一時停止していない場合にのみ続行します。