循環與觸發器（其中包含動畫）不起作用

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到小提琴的例子。