順番にクラスを付与していく方法を考えているのですが、
思いつかないのでご教授ください。
下記のようなソースでギャラリーをjqueryで作成しました。
「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。
画像にたいしてフェードをかけようと思い、画像を
初期状態でフェード0にしてactiveクラスがついたときに
フェードを100にしようと思いました。
対象の画像をクリックすることでクラスを追加したり
削除したりする方法はわかったのですが、
「次へ」「戻る」ボタンを押すことで画像を切り替えているため、
どのようにしたら順番に画像にクラスをつけることが
できるのかがわかりません。
簡単な方法をご存知の方おられましたら
よろしくお願いします。
<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ベストアンサー
- 回答日時:
「次へ」「戻る」のボタンの機能は、リストの順序で次と前でいいのですよね?
現在表示されてい要素に「active」クラスが設定されているのであれば、その次の要素と前の要素がわかればよいので、
next()、prev()で取得できると思います。
現在の表示要素からactiveのクラスを削除して、次(前)の要素に設定するような処理をすればよいのではないでしょうか?
両端の場合の判定(次/前がない時)は必要になるでしょうけれど。
なるほど!
next()、prev()っていうのがあるのですねぇ
大ヒントいただいてありがとうです!
最初と最後を取得すれば次がないときと
前がないときは大丈夫そうですね。
早速やってみます!
ありがとうです!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「thickbox3.1」のボタンをカス...
-
jspでcssが読み込めない
-
MAX関数を使ってからLEFT JOIN...
-
画面が真っ白になるのはどうして?
-
textareaに画像を表示したい
-
背景色を透明化
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
Jquery 親要素で順番入れ替え
-
MFCで画像を表示させているので...
-
Excel VBA マクロ 画像(...
-
表示・非表示のスクリプトで、...
-
iframe内のリンクが飛ばないの...
-
JS <a></a>タグ内のリンク先ア...
-
JimdoでWebアイコンフォントの...
-
pythonのpygameでキャラクター...
-
jQueryでクリックされた要素のi...
-
複数の画像をランダム(シャッ...
-
OpenCVを用いたヒストグラムの...
-
取得した位置情報を送信するには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報