0

我有一组绝对定位的 div，它们是图像的容器。每个 div 都有一个 class ，photoCover每个 img 有一个 class fbPhoto。我已经设置了一个循环函数，它在页面加载时会淡出集合中的每个图像，从而显示下面的图像然后循环。

当用户单击其中任何一个时，我需要能够阻止这种情况。

我已经尝试了各种涉及$(this).stop(true, true)SO 的选项和几个示例，但似乎没有任何效果。

这是循环函数的代码

var thumbNailTimeOut;
function loopSmallSlides(eleArray) {
    var slideCount = eleArray.length;
    $(eleArray).each(function (indexInArray) {
        var ele = this;
        thumbNailTimeOut = setTimeout(function () {
            if (indexInArray == slideCount - 1) {
                $(eleArray).fadeIn('slow').on("click", function () {
                    clearTimeout(thumbNailTimeOut);
                }); 
                clearTimeout(thumbNailTimeOut);
                loopSmallSlides(eleArray); // loop the function when the end is reached
            } else {
                $(ele).fadeToggle('slow').on("click", function () {
                    clearTimeout(thumbNailTimeOut);
                }); 
            };
        }, (indexInArray + 1) * 1000);
    });
};

循环函数接受以下生成的元素数组document.ready：

$(document).ready(function () {
    $('.photoCover').each(function () {
        // get an array of elements to slide
        var eleArray = $(this).children('.fbPhoto').get().reverse();
        loopSmallSlides(eleArray);
    });
});

片段

$(ele).fadeToggle('slow').on("click", function () {
    clearTimeout(thumbNailTimeOut);
});

正在尝试为数组中的每个元素添加一个单击处理程序，以便在单击任何这些元素时清除超时，但它不起作用。如您所见，该变量thumbNailTimeOut是全局可用的变量...据我所知，这应该可以取消timeOut吗？

如前所述，我尝试使用stop但无法到达任何地方，我尝试将 a 添加click到父元素，然后循环遍历子元素，删除任何动画，如下所示，但这不起作用。

$('.photoCover').each(function () {
     $(this).children('.fbPhoto').stop(true, true);
});

如果需要，HTML 如下所示：

<style>
   .photoCover{display:inline-block;width:204px;height:194px;vertical-align:top;}
   .fbPhoto{position:absolute;display:inline-block;width:110px;height:110px;margin:4px;background-position:center center;background-repeat:no-repeat;border-radius:5px;border:16px groove #93BABA;background-color:#93BABA;}
</style>

<div class="photoCover">
   <h4>Album Title</h4>                     
   <span style="background-image: url('IMG URL');" class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>                        
</div>

所以我的问题是，在嵌套在父元素中的每组图像上设置了这个循环后.photoCover，如何通过单击暂停该动画然后重新启动？

非常感谢任何帮助！SO上似乎还有很多其他问题，但我无法为这个例子找到答案！

4

1 回答 1

1

thumbNailTimeOut 在这个函数中被一遍又一遍地覆盖：

$(eleArray).each(function (indexInArray) { /* fn body */ });

函数完成其工作后，唯一存储在变量中的是您设置的最后一个超时。您可以尝试将变量用作数组。例如：

thumbNailTimeOut[index] = setTimeout(function () { /* fn body */ }, delay);

清除超时将变为：

clearTimeout(thumbNailTimeOut[index]);


但老实说：我不喜欢你使用那么多超时的方法。也许使用单个区间函数会方便得多。

编辑：
我试图用间隔重写你的函数。我还没有尝试过，但它看起来比超时代码干净得多：

function loopSmallSlides(eleArray) {
    var interval
    ,   $elems = $(eleArray);
    ,   current = 0;
    ,   slideCount = eleArray.length;

    interval = setInterval(function(){
        current = intervalFn($elems, current);
    }, 1000);

    $elems.on('click', function(e) {
        clearInterval(interval);
    });
};

function intervalFn($elems, current) {
    if( current < $elems.length) {
        $elems.eq(current).fadeIn('slow');
        return current+1;
    } else {
        $elems.fadeOut('slow');
        return 0;
    }
}
于 2012-11-29T13:23:40.357 回答