javascript - jQuery 鼠标悬停连续幻灯片循环

Question

我正在尝试使用 setInterval() 在悬停时创建连续循环，但调用适当动画的函数只被调用一次。

我正在尝试实现看到的效果 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。

提前致谢。

Answer 1

对于 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);

而且，“slideshow-block”的重复 ID 是 invalid , 它们每个都应该是唯一的或使用 class而不是像我一样。虽然这与您的问题没有直接关系，但很高兴知道，因为它可能导致 other problems .