循环与触发器（其中包含动画）不起作用

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'）被触发EVERY TIME并且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(); 
}); 

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

希望这会有所帮助。

Answer 2

下面是在this fiddle上执行此操作的一种可能方式的完整解决方案。

HTML：

顶部容器保持图像。在这个特定的例子中，我已经包括三个，使用divs而不是图像。无论您使用图像还是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向左或向右移动其位置。

同时还包括有两个NAV按钮（前进和后退）

<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：

请参阅JS小提琴所有CSS规则。

最重要的是：

.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和​​仅用于颜色的图像的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); 
}); 

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

$('.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); 

}); 

这是link到小提琴的例子。