javascript - 带触发器的循环(包含动画)不起作用

Question

所以我好像跑进了一个死胡同。我正在制作一个包含图像 slider 的页面。 slider 有三张图片，一张在屏幕中央，另外两张在左右两侧溢出。当您单击按钮以推进幻灯片时，它会运行此代码....

$('#slideRight').click(function() {
    if ($('.container').is(':animated')) {return false;}
    var next=parseInt($('.container img:last-of-type').attr('id')) + 1;
    if (next == 12) {
        next = 0;
    }
    var diff = galsize() - 700;
    if ($('.thumbs').css("left") == "0px") {
        var plus = 78;
    } else {
        var plus = 0;
    }
    var app='<img id="' + next + '" src="' + imgs[next].src + '">';
    $('.container').width('2800px').append(app);
    $('.container').animate({marginLeft: (diff + plus) + "px"}, 300, function() {
        $('.container img:first-of-type').remove();
        $('.container').width('2100px').css("margin-left", (galsize() + plus) + "px");
    });
}); // end right click

这很好用，没问题.....我还设置了一个间隔，每 5 秒自动运行一次以形成幻灯片...

var slideShow = setInterval(function() {
    $('#slideRight').trigger("click");
}, 5000);

这也很完美，没问题....但是我的问题是....我有缩略图，当你点击缩略图时，它应该运行这段代码直到当前图片与缩略图相同....这是代码....

$('img.thumbnail').click(function() {
    clearInterval(slideShow);
    var src = $(this).attr("src");
    while ($('.container img:eq(1)').attr('src') != src) {
        $('#slideRight').trigger("click");
    }
});

当我点击缩略图时没有任何反应......我已经使用警报语句来尝试和调试，最终发生的是......

while 循环执行，但是第一次没有任何反应。幻灯片一点也不先进。从第二次执行开始，每次都会触发 is('::animated') 并且不会执行 slideRight 事件的其余部分...

那么我的第一个问题，谁能解释一下为什么它第一次没有运行？

我的第二个问题，有没有办法等到动画完成后再继续循环？

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

我将从你问题的第二部分开始，关于在继续循环之前完成动画。

我以前做过类似的事情，我做的是设置两个全局变量来控制动画。一个变量是您希望周期持续多长时间，另一个是自上次循环以来经过了多长时间的计数器。

所以，例如:

$timeToChange = 5; // in Seconds
$timeSinceReset = 0; // also in Seconds

将间隔设置为一秒并调用一个新函数 (autoAdvance()):

var slideShow = setInterval(function() {
    autoAdvance();
}, 1000); // only one second

然后使用counter变量统计每次调用interval的时间(每秒)。像这样的东西:

function autoAdvance(){

    if($timeSinceReset == $timeToChange){

        $timeSinceReset = 0;

        $('#slideRight').trigger("click"); // execute click if satisfied
    }
    else{$timeSinceReset++;}

}

要在动画完成之前停止循环，请在单击缩略图时将 $timeSinceReset 重置回 0(零)。像这样的东西:

$('#thumbnail').click(function(){
    $timeSinceReset = 0;
});

这将在循环继续之前为您提供 5 秒缓冲(或您设置的任何 $timeToChange)。

对于问题的第一部分，获取特定缩略图的编号，然后使用它滚动到适当的图像。像这样的东西:

$('.thumb').click(function (each) {
    $childNumber = $(this).index();
});

您可以在 this fiddle 中看到.单击其中一个灰色框，它会告诉您单击了哪一个。使用该信息滚动到相应的图像(如果您只有三张图像，则为 1、2 或 3)。

希望这对您有所帮助。