javascript-使用fadeIn循环jQuery函数

我正在使用一个简单的jQuery函数来创建一个小的图像滑块：

function gridhover() {
    $(".grid-item .slide-image").each(function(index) {
        $(this).delay(400*index).fadeIn(300);
    });
}

$( ".grid-item" ).hover(function() {
    gridhover();
});

如果该功能播放一次,它将停止.有没有一种循环功能的方法？看看我的CodePen！

解决方法:

基于this example,我为您准备了this jsFiddle.

<div id="cycler">
    <img class="active" src="image1.jpg" alt="My image" />
    <img src="image2.jpg" alt="My image" /> 
    ...
</div>

他在示例中所做的是,他选择了.active元素,并寻找下一个同级对象以知道接下来要显示哪个.如果不存在,则表示当前活动对象是最后一个,因此他再次使用第一个.简单.

我接受了他的功能并将其应用于.hover().并将myInterval变量设置为全局变量,以便您可以从.hover()及其回调函数访问它.

var milisecs = 1000;
var myInterval;

$("#cycler").hover(function(){
    myInterval = setInterval(function(){cycleImages()}, milisecs);
}, function(){
    clearInterval(myInterval);
});
...

查看整个jsfiddle.

希望能帮助到你.