マウスオーバーで画像スライドショーを一時停止する

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

FIDDLE

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