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

Question

所以我似乎遇到了一点死胡同。我正在制作一个带有图像滑块的页面。滑块有三个图像，一个位于屏幕上，另外两个在左侧和右侧溢出。当您单击按钮以前进幻灯片时，它会运行此代码。

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

然后使用计数器变量对每次调用间隔的时间进行计数(每秒)。 像这样：

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();
});

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

希望这有帮助。

Answer 2

这是一个完整的解决方案，可以解决这种小提琴的一种可能方法。

.HTML：

顶部容器保存图像。 在这个特定的示例中，我包含三个，使用div 而不是图像。 无论您使用图像还是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>

.img_container保存所有图像，并且宽度与图像宽度的总和相同。 在这种情况下，每个图像(.photo)宽150px，高50px，因此.img_container宽450px，高50px。.holder_container与单个图像的尺寸相同。 当此操作运行时，.holder_container设置为在.img_container向左或向右移动其位置时隐藏任何溢出。

还包括两个导航按钮(前进和后退)

<div class="nav_buttons">
<div class="nav back"><<<</div>
<div class="nav forward">>>></div>
</div>

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

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

.CSS：

有关所有 CSS 规则，请参阅 JS Fiddle。

最重要的是：

.holder_container {
margin: 0px;
padding: 0px;
height: 50px;
width: 150px;
position: relative;
overflow: hidden;
}
.img_container {
margin: 0px;
padding: 0px;
height: 50px;
width: 450px;
position: relative;
left: 0px;
top: 0px;
}

在示例中，.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

功能：

自动前进 - 每秒通过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);
});

如果单击其中一个导航按钮，请相应地移动。 如果单击"后退"，请向后移动一张图像(如果当前在第一个图像上，则向后移动到最后一个图像)。 如果单击"第一个"，则向前移动一个图像(如果当前位于最后一个图像，则向前移动第一个图像)。

$('.nav').click(function(){
timeSinceReset = 0;
if($(this).hasClass('back')){ // Back button
if(currentImage == 1){
currentImage = totalImages;
}else{
currentImage--;
}
}else{ // Forward button
if(currentImage == totalImages){
currentImage = 1;
}else{
currentImage++;
}
}
var newPos = -((currentImage-1) * 150) + 'px';      
$('.img_container').animate({left: newPos}, 300);
});

这是小提琴示例的链接。