從頭開始製作一個簡單的jQuery幻燈片，並帶有一個前向/後向控制

Question

我真的希望你們中的一些人能夠爲我提供這方面的幫助。

我有一些標記，看起來像這樣：

<section id="carousel"> 
     <div> 
     <ul> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
     </ul> 
     </div> 
     <div> 
     <ul> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
     </ul> 
     </div> 
     <div> 
     <ul> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
      <li><a href=""><img src="img/placeholder.png" alt=""/></a></li> 
     </ul> 
     </div> 
     <ul class="dots"> 
     <li class="active">•</li> 
     <li>•</li> 
     <li>•</li> 
     </ul> 

     <button>Previous</button> 
     <button>Next</button> 
    </section> 

我基本上只是想用一個/下一個按鈕，任何數量的div之間的無限循環，並移動。主動類的。點到相應的李。只是不太確定如何去做。我不想使用現成的解決方案，因爲答：我想保留標記只是如此和B）如果你們其中一個有我的解決方案，我想反向工程，並且將模型擴展到我想到的更復雜一點。

如果你們有想法，我們將非常感激一些例子。感謝您的幫助！

Answer 1

• 無限的div之間的循環，你可以使用setInterval反覆調用更改活動DIV的功能。或者，您可以在該函數內使用setTimeout，使其遞歸。

• 要移動.active類，可以使用jQuery的.addClass()和.removeClass()函數。

• 要通過按鈕更改活動<div>，您可以附加一個事件偵聽器，如$("#before").click()和$("#after").click()。