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または、その関数内から 使用して、再帰的にすることもできます。

  • クラスを移動するには、jQueryと関数.activeを使用できます。.addClass().removeClass()

  • ボタンを使用してアクティブを変更するには、や<div>などのイベント リスナーをボタンにアタッチします。$("#before").click()$("#after").click()

于 2012-08-17T04:42:02.307 に答える