追加和翻轉元素一次去使用jQuery無限旋轉木馬

Question

好的，所以我有一個旋轉木馬，左右動畫。

有說... 1000px寬的視口div和一系列內部可能總計5000px的div。在任何時候，它們都是左移的，我只看着視口div中的4個項目。什麼是最好的方法使它無限。如何檢測用戶是否已到達我的傳送帶中的最後一個div（向左或向右）。你會刪除所有元素，並顛倒順序，並將它們追加到同一個div？或者其他一些方法？我正在使用jQuery ...

這只是在這個概念（無限的部分），所以代碼是不是真的可以發佈。我只是在潛在的解決方案...

Answer 1

我想這是你做了一個「正常」的輪播。 假設HTML是這樣的：

<div class="viewport"> 
    <div class="container"> 
     <div class="group"> <!-- Without this div probably --!> 
      <div class="item"></div> 
      <div class="item"></div> 
     </div> 
    </div> 
</div> 

使之成爲「旋轉木馬」，你會做視口的寬度固定和容器擴大到包含其所有子項（含overflow: hidden）。當向右滾動時，你減小它的左偏移量，當向左滾動時，你增加它的左偏移量。如果左偏移量> = 0，則表示您處於第一項。如果左偏移量< = - （容器寬度），則表示您處於最後一項。

您應該每次向左/向右滾動時檢查這些條件，因此，您將在「組」之前/之後追加容器的副本，一旦舊組不可見，您可以將其刪除。這使得滾動平滑，並且位置不會從結尾到開始捕捉。但是，如果有很多項目，這可能會很慢。因此，最初，您可以將項目劃分爲多個「組」，例如5個，並且一旦到達結尾，追加第一個/最後一個組的副本，並刪除第一個/最後一個組。

另一種選擇是快速向相反的方向滾動。而不是捕捉到另一端，這不會給用戶提供視覺反饋，您可以更快地將滾動動畫到另一端。在這種情況下，一旦用戶結束，滾動停止，並且如果他再滾動一次，則滾動回到開始，以便他不會對發生的事情感到驚訝。

這只是我的兩美分。我曾經做過旋轉木馬，但沒有這個功能。我曾經考慮過，但沒有實施。

希望它有幫助。