鼠標懸停圖像幻燈片

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;}並且只有在沒有暫停時才繼續。