Javascript 触发器（包含动画）不工作的循环

所以我似乎有点走到了死胡同。我正在制作一个带有图像滑块的页面。滑块有三个图像，一个位于屏幕中央，另两个位于左右两侧。当您单击按钮以推进幻灯片时，它将运行以下代码

$('#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

这也很好，不是问题。。。。然而，我的问题是。。。。我有缩略图，当你点击一个缩略图，它应该运行此代码，直到当前图片是相同的缩略图。。。。这是代码

$('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事件的其余部分不会执行

所以我的第一个问题是，有人能解释一下为什么它不能第一次运行吗

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

---

任何帮助都将不胜感激。谢谢大家!

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

我在过去做过类似的事情，我做的是设置两个全局变量来控制动画。一个变量表示您希望周期的长度，另一个变量表示自上次循环以来的时间

例如：

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

将间隔设置为1秒并调用新函数（

autoAdvance（）

）：

然后使用计数器变量在每次调用间隔时（每秒）计数。比如：

function autoAdvance(){

    if($timeSinceReset == $timeToChange){

        $timeSinceReset = 0;

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

}

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

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

要停止循环直到动画完成，请在单击缩略图时将

$timesinceret

重置回0（零）。比如：

function autoAdvance(){

    if($timeSinceReset == $timeToChange){

        $timeSinceReset = 0;

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

}

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

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

在循环继续之前，这将为您提供一个5秒的缓冲区（或您设置的任何值）

至于问题的第一部分，抓取特定缩略图的编号，并使用该编号滚动到相应的图像。比如：

function autoAdvance(){

    if($timeSinceReset == $timeToChange){

        $timeSinceReset = 0;

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

}

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

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

你可以从中看到。点击其中一个灰色框，它会告诉你你点击了哪个。使用该信息滚动到相应的图像（如果只有三个图像，则为1、2或3）

---

希望这能有所帮助。

这里提供了一个完整的解决方案，可供您随时使用

HTML:

顶部容器保存图像。在这个特定的例子中，我包括了三个，使用div而不是image。无论您使用图像还是div，都不会改变任何事情

<div class="holder_container">
    <div class="img_container">
        <div class="photo type1">ONE</div> 
        <div class="photo type2">TWO</div>
        <div class="photo type3">THREE</div>
    </div>
</div>

以及三个缩略图-顶部容器中的每个图像一个

<div class="top">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
</div>

在本例中，

.type1

、

.type2

和

.type3

仅用于给图像div上色，以便您可以看到动画。它们可以从代码中删除

JavaScript:

javascript包含以下元素

变量：

var timeToChange = 3;   // period of the image change, in seconds
var timeSinceReset = 0; // how many seconds have passed since last image change
var currentImage = 1;   // Which image you are currently viewing
var totalImages = 3;    // How many images there are in total

职能：

autoAdvance—通过

setInterval

每秒调用一次。统计自上次图像更改后的秒数。如果经过的秒数等于该时间段，则调用一个函数来切换图像

function autoAdvance() {
    if (timeSinceReset == timeToChange) {
        timeSinceReset = 0;
        moveNext();
    } else {
        timeSinceReset++;
    }
}

moveNext（）-移动到下一个图像。如果当前图像是最后一个（

currentImage==totalImages

），则将

currentImages

设置回1，并显示第一个图像

function moveNext(){
    if(currentImage == totalImages){
        currentImage = 1;
        var newPos = 0 + 'px';      
        $('.img_container').animate({left: newPos}, 300);
    }else{
        currentImage++;
        var newPos = -((currentImage-1) * 150) + 'px'; // child numbers are zero-based  
        $('.img_container').animate({left: newPos}, 300);
    }
}

代码的其余部分：

如果单击其中一个拇指，则移动到相应的图像

$('.thumb').click(function (each) {
    timeSinceReset = 0;
    var childNumber = $(this).index();
    currentImage = childNumber + 1; // child numbers are zero-based

    var newPos = -(childNumber * 150) + 'px'; // child numbers are zero-based   
    $('.img_container').animate({left: newPos}, 300);
});

如果单击其中一个导航按钮，则相应地移动。如果单击“后退”，则向后移动一个图像（如果当前在第一个图像上，则移动到最后一个图像）。如果单击“第一个”，则向前移动一个图像（如果当前位于最后一个，则移动到第一个图像）

---

这是小提琴的例子。

谢谢。这两个变量唯一的问题是，如果单击箭头，什么也不会发生。它有三种不同的方式来访问照片，点击左/右箭头（例如#slideRight按钮）、幻灯片和缩略图。我意识到在第一篇文章之后，我对它进行了一个小的编辑。您需要调用一个函数，而不是从setInterval调用click。在该函数中，您可以添加到$timeSinceReset，并检查条件。如果条件通过，则执行单击。我将在帖子中编辑它。我尝试在没有间隔的情况下运行它。问题在于代码本身的动画$（'.container'）.animate（{marginLeft:（diff+plus）+“px”}，300，function（）{$（'.container-img:type'）.remove（）；$（'.container'）.width（'2100px'）.css（“左边距]，（galsize（）+plus）+“px”）；}）；那么动画从来都不起作用？不管是不是缩略图？我还没有运行代码来检查它是否工作。我对答案进行了编辑，以解释如何创建自定义函数并将其与setInterval一起使用。内容中有一个.animate（），它可以在300毫秒的时间内滑动图片。这就是阻止代码工作的动画。由于div宽度和边距的精确性质，动画需要在内容再次运行之前完成。感谢Birrel。。。。。但我决定只编写新的代码来实现slideRight按钮的功能，只处理多个图像，而不是触发多次单击。这似乎比试图解决这个问题更容易。从一开始就将所有图像包含到DOM中的问题是，当它到达最后一个图像时，它不会循环回到开始，而是一直滑到开始。谢谢你的帮助。我很感激你为这个方法所付出的努力，你可以用这个方法来雄辩地从最后一个移动到第一个，反之亦然，就是复制第一个图像并将其放在af上