![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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ランキング
-
以前質問していた将棋のプログ...
-
<div>のタッチ状態を維持したま...
-
画像の表示位置
-
変数宣言と初期値代入の場所に...
-
jQueryでシンセサイザーを作っ...
-
追加ボタンを押した際に ok ボ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
-
変数名をどのようにつけるのが...
-
ボタンを押したあとに画像を表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1ページ内に複数のjqueryのスラ...
-
ポートフォリオサイトに載せる...
-
クリックで卵がパカっと割れる...
-
jQueryでheightが指定されてい...
-
Resizableでクリック軸判定方法
-
prototype.jsとjquery.jsの併用...
-
背景画像のスライドショー
-
jqueryのプラグインのoptionとi...
-
どなたかAtomエディタでjQuery ...
-
既に複数行あるフォームの項目...
-
クリックすると画像が飛び出て...
-
jsでhtmlを部分的にインクルー...
-
jQueryで書き換えた要素のリセット
-
Flashを使ったバナーの作り方
-
jQuery1.3.2を使用しています。
-
jquery画像ビューアー(IE6対応)
-
JavaScriptでスライドショー。...
-
リンク付きサムネイルのスライ...
-
Jqueryでコンテンツスライダー...
-
マウスオーバーでゆっくり出る...
おすすめ情報