http://apoc.jp/jquery-slider-howto/
コチラのサイトを参考にし、タイマーなどによるスライドはなしでクリックのみのスライドショーをしたいと思っております。
サイトの通りに作ると動きはするのですが、1ページ内に複数配置すると、サイトのslideSetWidthという変数の値がページ内の画像すべてで総合計を出してしまい、空白のスライドができてしまったり、ページ内のスライドが全部一斉に動いたりしてしまいます。
スライドごと個別に動くよう、さらに言うと今後写真の差し替えや増減も考慮して、そのたびにjqueryを書き換えるということはしなくても良いようにしたいのですが、どのようにしたらよろしいのでしょうか?
なにとぞよろしくお願いします。
No.1ベストアンサー
- 回答日時:
こんにちは。
ご提示の参考サイトでは、理解しやすいようにid等を固定のものとして処理するような記述法をとっていますが、複数のセットに対して動作させようとするとそのままではうまくいきません。
例えば、
全体を一般化して、処理対象を一つのセットに対して限定できるようにしておくような記述にすることでも対応可能です。
クリックした要素はどれかのセットに紐づけられた要素なので、そこから要素のラッパーを調べて、常にそのセットに対して処理するといった要領です。
考え方がもう少し複雑になりますが、全体ををオブジェクト化しておいて、それぞれのセットに対して設定するといった方法も考えられます。(よく用いられている方法です)
上記が『何のこっちゃかさっぱりわからん!』というような場合は、同じスクリプトをコピーしておいて、変数名やidが被らないように書き換えるという方法が一番簡単だと思います。
(ただし、セット数が多くなると、その分だけスクリプトも増大します。)
>slideSetWidthという変数の値がページ内の画像すべてで総合計を出してしまい~
複数セットある場合は、要素選定などの際に、対象の範囲がそのセット内に収まるように注意する必要があります。
例えば
>slideNum = $('.slide').length;
では、文書内の全てのslideクラスを持つ要素の数を取得していますので、複数セットあれば全体をまとめた数になってしまいます。
多分、個々のセット内のslideクラスの要素数を取得したいはずなので、 例えばラッパーにidがふられていて、それをIDとするなら
$('#ID .slide').length;
などとすることで、要素の範囲を限定可能ですね。
参考サイトのように各親要素ともslideSetのような同じクラスしかなくて、単純には区別できないというのであれば
$('.slideSet').each(function(i){
~~
slideNum = $('.slide', $(this)).length;
~~
})
などといった記述にすることでも、それぞれのセット内のslide要素だけを対象にすることができます。
それぞれのセット内で同じクラス名を用いておいた方が、CSSの設定を共有できるなど都合の良いことも多いですが、スクリプトから要素を指定する際には、セレクタを工夫するなどして、適切に対象を選定できるようにしておくことが必要になります。
jQeryでは、CSSセレクタとほぼ同じセレクタ+αが利用可能ですので、意図する対象が指定できる方法を考えみてください。
http://api.jquery.com/category/selectors/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Visual Basic(VBA) エクセルから、パワーポイントのスライドを複数作成する。 1 2022/07/08 09:40
- PowerPoint(パワーポイント) you tubeにパワポで作った動画を投稿する方法 1 2023/04/09 22:56
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- Visual Basic(VBA) PowerPoint VBA で画像の鮮明度を変更する方法がわかりません 2 2023/03/24 13:34
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- その他(自然科学) 中古で買った対物レンズの精度を確認できるものとして顕微鏡校正スライドは必要でしょうか? 2 2022/04/12 20:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jquery UIのdatepickerで和暦
-
クリックで卵がパカっと割れる...
-
クリックすると画像が飛び出て...
-
JavaScriptでスライドショー。...
-
無料の掲示板でよく使われてる...
-
マイページはどこを開くの
-
ウインドウを毎回同じ位置、大...
-
エクセルのシート上に別のシー...
-
デジタル時計の時刻合わせの方...
-
エクセルVBAでフォームのListbo...
-
Javascript_submit()完了後に処...
-
小さな表示窓の呼び方は
-
一定時間おきにアラームやポッ...
-
同じページをブラウザで複数開...
-
スクリプトって、何ですか?ど...
-
Excelでワードアートや図を常に...
-
リストビューをスクロールさせ...
-
画面を閉じる(×ボタンやタスク...
-
[Java] Edgeでのアドレスバー非...
-
ポップアップウィンドウがブロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1ページ内に複数のjqueryのスラ...
-
jQueryでclientWidthが使えない
-
クリックすると画像が飛び出て...
-
マウスオーバーでゆっくり出る...
-
jQueryで書き換えた要素のリセット
-
jquery UIのdatepickerで和暦
-
「jscrollPane」でテキストを認...
-
jquery画像ビューアー(IE6対応)
-
1ページ内に 複数のタブボッ...
-
prototype.jsとjquery.jsの併用...
-
クリックで卵がパカっと割れる...
-
IE8のJavascriptアコーディオン...
-
GUIについて
-
ゆっくりと出るプルダウンを作...
-
jquery スライドしながらフェード
-
背景画像のスライドショー
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
ウインドウを毎回同じ位置、大...
-
エクセルのシート上に別のシー...
おすすめ情報