javascript - 次/前のボタンがクリックされたときにカルーセル内のリンクを更新するのに助けが必要

Question

私はゼロからカルーセルを構築していますが、カルーセルを変更するリンクのリストに「現在の」クラスを追加する方法を考えています (色を変更するため) (メインのカルーセル div の外側)。

次または前のボタンがクリックされたときに、どの番号 LI を更新するかを知る方法について混乱しています。

たとえば、現在の画像が 10 枚中 4 枚だとします。前のボタンをクリックすると 3 番目のリンクが更新され、次のボタンをクリックすると 5 番目のリンクが更新されるようにするにはどうすればよいですか?

Answer 1

内部カウンターを保持する必要があります。すべてのカルーセル スクリプトがこれを行います。カウンターは 0 ～ 9 の数字 (10LIの場合) です。Next はそれを 1 増やし、Prev はその逆です。このようなもの：

(function() { // you'll have some kind of closure
  var active = 0, size = 10;

  function next() {
    var prevActive = active;
    active++;
    if ( size <= active ) {
      active = 0;
    }
  }

  function prev() {
    // same general idea here
  }
})();

なぜ独自のカルーセル スクリプトを作成しているのですか? 文字通り何百もあります。