0

我真的希望你们中的一些 jQuery 专家可以帮我解决这个问题。

我有一些看起来像这样的标记：

 <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">•&lt;/li>
        <li>•&lt;/li>
        <li>•&lt;/li>
      </ul>

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

我基本上只是想使用上一个/下一个按钮在任意数量的 div 之间无限循环，并将 .dots 上的 .active 类移动到相应的 li。只是不确定如何去做。我不想使用现成的解决方案，因为 A.) 我想保留标记， B.) 如果你们中的一个人有适合我的解决方案，我想对其进行逆向工程并扩展模型到我想到的更复杂的东西。

如果你们有想法，真的很感激一些例子。感谢您的任何帮助！

4

1 回答 1

1

  • 要在 div 之间无限循环，您可以使用setInterval重复调用更改活动 div 的函数。或者，您可以setTimeout在该函数中使用，使其递归。

  • 要移动.active类，您可以使用 jQuery.addClass()和.removeClass()函数。

  • 要通过按钮更改活动<div>，您可以将事件侦听器附加到它们，例如$("#before").click()和$("#after").click()。

于 2012-08-17T04:42:02.307 回答