jQuery的鼠標懸停連續幻燈片循環

我想創建一個使用setInterval（）懸停的連續循環，但調用適當的動畫的函數只被調用一次。jQuery的鼠標懸停連續幻燈片循環

我試圖在懸停產品時實現看到的效果here。

這是我目前在jsfiddle。

var hoverInterval; 

var i = 0; 

function doStuff(slides) { 
    var count = slides.length; 

    slides.eq(i).animate({top:'100px'}, 100); 

    if(++i>=count){ 
     i=0; 
    } 

    slides.eq(i).animate({top:'0px'}, 100); 

    setTimeout(doStuff(), 500);  
} 

$(function() { 
    $("#slideshow-block").hover(
     function() { 
      // call doStuff every 100 milliseconds 
      hoverInterval = setInterval(doStuff($(this).children('.slide')), 500); 
     }, 
     function() { 
      // stop calling doStuff 
      clearInterval(hoverInterval); 
     } 
    ); 
});

我見過張貼類似的問題，但大多數建議使用CodaSlider和其他插件，但由於項目技術規格，我需要做這種純粹的jQuery/JS。

在此先感謝。

來源

2014-03-12 Eric T

也請原諒可怕看代碼，我是一個95％的後端開發 –

對於setInterval如果您想將參數傳遞給它，您需要將您的函數包含在匿名函數中。 More info。

hoverInterval = setInterval(function() {doStuff(parameters)}, 1000);

這裏是基於你的updated fiddle。我做了一些額外的改進。

您可能希望當鼠標離開區域，可以將所有數據：

//reset the counter  
i= 0; 
//reset all slides 
$(this).children('.slide').animate({top:'100px'}, 0); 
//first one should be in visible area   
$(this).children('.slide').eq(0).animate({top:'0px'}, 0); 
// stop calling doStuff 
clearInterval(hoverInterval);

而且還具有「幻燈片放映塊」重複的ID是invalid，應該爲他們每個人是唯一的，或者使用class代替像我一樣。這不是直接與你的問題直接相關，但它是很好的知道，因爲它可能會導致other problems。

來源

2014-03-13 02:26:28 Janez

非常感謝您 - 接受本作爲答案。羅科的答案也適用。 –

你可以建立自己的簡化插件像this one：

jQuery(function($) { 

    $.fn.hoverAnimate = function(obj){ 
    return this.each(function(){ 
     var slideTime = obj.slide||300, 
      pauseTime = obj.pause||1000, 
      el = $(this), 
      height = el.outerHeight(true), 
      sl = $(">*", el), 
      n = sl.length, 
      i = 0, 
      itv; 
     function loop(){ 
     itv = setInterval(function(){ 
      sl.eq(++i%n).appendTo(el).css({top:height}).animate({top:0},slideTime); 
     },pauseTime+slideTime); 
     } 
     function stop(){ 
     clearInterval(itv); 
     } 
     el.hover(loop, stop); 
    }); 
    }; 

    // Use like: 
    $("#one").hoverAnimate({slide:600,pause:1000}); 
    $("#two").hoverAnimate({pause:500}); 
    $(".someSelectors").hoverAnimate(); // Will use default 300, 1000 

});

來源

2014-03-13 04:39:06

jQuery的鼠標懸停連續幻燈片循環

回答

相關問題