創建一個jQuery幻燈片動畫

Question

我試着去創建自己的幻燈片， 我知道有很多插件avaible，但沒有什麼我能找到符合我的需求。

本身作品的幻燈片，我遇到的問題是動畫。 當你多次點擊下一個按鈕時，一切都會變得混亂起來。

.stop（）或.clearQueue（）函數可以工作，因爲這會使動畫停止而不先完成。

來源： http://www.alphadesigns.nl/ADtest/JQ/js/portfolio.js

前瞻： http://www.alphadesigns.nl/ADtest/JQ/

任何幫助表示讚賞！

PS。幻燈片顯示自己並沒有完成一個長鏡頭，「巨大的圖像」將被改爲更小的縮略圖等，但我首先要動畫正常工作。

Answer 1

從看你的腳本，它會出現在你正在運行到一個競爭狀態。您正在以比您想象的更快的速度移除和添加類，從而創建一個條件，當您打算選擇一個時，您將選擇多個項目。

例如：

slidecontent = $('.slidecontent'); 
slideimg.prepend(slidecontent.children('img').addClass('slidecontent')); 
slidecontent.removeClass('slidecontent').addClass('slideleft thisclassc'); 

在你previmg功能你有以上線。如果單擊太快觸發此功能，您在對象slidecontent結束與一個以上的項目，因爲您分配了相同的類列表中的下一個元素的按鈕。您需要以某種方式鎖定該功能，直到它完成或您需要製作更具體的選擇器。

我能想到這樣做的最簡單的方法，但不是最優雅的是創建一個鎖標誌。然後，您可以測試鎖標誌前的功能，以避免出現競爭狀況並設置一個即時超時跑了，讓你立即返回，而忽略了額外的點擊：

var animActive = false; 

$.fn.previmg = function(){ 
    $(this).click(function(){ 
     if(totalrightimg != 0 && animActive==false){ 
      animactive = true; 
      setTimeout(function(){ 
       //everything else 
       animactive = false; 
      },0); 
     } 
     else if(totalrightimg == 0 && animActive==false){ 
      animactive = true; 
      setTimeout(function(){ 
       //everything else 
       animactive = false; 
      },0); 
     } 
    } 
}); 

如果添加此變量，然後做這個檢查，你一定要避免競爭條件，因爲你不會在彼此之上運行操縱。每次操作運行時，它都會鎖定其再次運行的能力，直到完成。所以後續的點擊將被忽略。

，如果這種行爲是不可取的，你會想看看的方式，使您可以確保你永遠只選擇一個元素來縮小了「slidecontent」類的選擇。

編輯：完全忽略了點擊事件的同步處理。我的錯。上面的代碼將強制鎖定和解鎖到單獨的作用域，因此您應該安全地執行更改代碼。