順番にクラスをつけていく方法

質問

順番にクラスを付与していく方法を考えているのですが、
思いつかないのでご教授ください。

下記のようなソースでギャラリーをjqueryで作成しました。
「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。
画像にたいしてフェードをかけようと思い、画像を
初期状態でフェード０にしてactiveクラスがついたときに
フェードを１００にしようと思いました。

対象の画像をクリックすることでクラスを追加したり
削除したりする方法はわかったのですが、
「次へ」「戻る」ボタンを押すことで画像を切り替えているため、
どのようにしたら順番に画像にクラスをつけることが
できるのかがわかりません。

簡単な方法をご存知の方おられましたら
よろしくお願いします。

<div id="gallery">
<ul>
<li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li>
</ul>
</div>

<div class="paging">
<a href="#" class="previous">戻る</a>
<a href="#" class="next">次へ</a>
</div>

回答No.1

fujillin · ベストアンサー

「次へ」「戻る」のボタンの機能は、リストの順序で次と前でいいのですよね？

現在表示されてい要素に「active」クラスが設定されているのであれば、その次の要素と前の要素がわかればよいので、
next()、prev()で取得できると思います。
現在の表示要素からactiveのクラスを削除して、次（前）の要素に設定するような処理をすればよいのではないでしょうか？

両端の場合の判定（次/前がない時）は必要になるでしょうけれど。

お礼

なるほど！
next()、prev()っていうのがあるのですねぇ
大ヒントいただいてありがとうです！
最初と最後を取得すれば次がないときと
前がないときは大丈夫そうですね。

早速やってみます！
ありがとうです！