順番にクラスを付与していく方法を考えているのですが、
思いつかないのでご教授ください。
下記のようなソースでギャラリーを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ランキング
-
【jQuery】2分割レイアウトで、...
-
javascriptで文字サイズの変更
-
bxsliderでスライドショーの間...
-
楽天APIのデータをjqueryのgetJ...
-
Javaスクリプトで画像を縦にス...
-
Slick.jsのオプションrtlについて
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
JSPでの画像ファイル表示
-
c++std::string型をTCHARに変換...
-
変数名をどのようにつけるのが...
-
【CSS】floatで左右に並べた...
-
javascriptでオブジェクトの重...
-
JavaScriptで変更した属性の元...
-
読み込んだQRコードをフォーム...
-
jqueryのsortableで一部ソート...
-
JavaScriptで、?マークとコロ...
-
CSS <div>の入れ子が反映さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
Javaスクリプトで画像を縦にス...
-
CSSでマウスオーバーした画像を...
-
スライドショー「Skitter」をカ...
-
jsでグリッドデザインのサムネ...
-
複数の要素へ appendchild でき...
-
【iOS及びAndroid】リンク画像...
-
jqueryのプラグインslickの画像...
-
bxSliderのランダム表示について
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
Dreamweaver上とデバイスプレビ...
-
チェックボックスと画像切替の連動
-
Javascriptを使用したスライド...
-
画像をフェードアウト&フェー...
おすすめ情報