質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

444閲覧

スライダーが勝手に連動?

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/02/27 23:14

編集2018/02/28 07:55

下記のような画像スライダーがあるのですが、ご覧のように、スライダーABが勝手に連動してしまいます。

■実際の動作
https://jsfiddle.net/0q0wy0zk/

■そのコード

html

1スライダーA 2<section class="a"> 3 <div class="slider"> 4 <div class="slideSet"> 5 <div class="slide1 slide-a1 slide">画像a1</div> 6 <div class="slide2 slide-a2 slide">画像a2</div> 7 </div> 8 </div> 9</section> 10 11スライダーB 12<section class="b"> 13 <div class="slider"> 14 <div class="slideSet"> 15 <div class="slide1 slide-b1 slide">画像b1</div> 16 <div class="slide2 slide-b2 slide">画像b2</div> 17 <div class="slide3 slide-b3 slide">画像b3</div> 18 </div> 19 </div> 20</section>

javascript

1(function(){ 2 var slideWidth = $('.slide').outerWidth(); // .slideの幅を取得して代入 3 var slideNum = $('.slide').length; // .slideの数を取得して代入 4 var slideSetWidth = slideWidth * slideNum; // .slideの幅×数で求めた値を代入 5 $('.slideSet').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 6 7 var slideCurrent = 0; // 現在地を示す変数 8 9 // アニメーションを実行する独自関数 10 var sliding = function(){ 11 // slideCurrentが0以下だったら 12 if( slideCurrent < 0 ){ 13 slideCurrent = slideNum - 1; 14 15 // slideCurrentがslideNumを超えたら 16 }else if( slideCurrent > slideNum - 1 ){ // slideCUrrent >= slideNumでも可 17 slideCurrent = 0; 18 19 } 20 21 $('.slideSet').stop().animate({ 22 left: slideCurrent * -slideWidth 23 }); 24 } 25 26 27 // 画像が押されたとき 28 $('.slideSet').click(function(){ 29 slideCurrent++; 30 sliding(); 31 }); 32}());

css

1 .slideSet > div { 2 width: 100px; 3 height: 50px; 4 border: 1px solid #f00; 5 box-sizing: border-box; 6 } 7 8 .slide { 9 float: left; 10 } 11 12 .slideSet { 13 position: absolute; 14 } 15 16 .slider { 17 width: 100px; 18 height: 50px; 19 overflow: hidden; 20 position: relative; 21 } 22 23 .slide1 { 24 background: red; 25 } 26 27 .slide2 { 28 background: yellow; 29 } 30 31 .slide3 { 32 background: aqua; 33 } 34 35 .slide4 { 36 background: purple; 37 } 38 39 .slide5 { 40 background: green; 41 }

どなたか、それぞれのスライダーを独立させるような方法をご教示いただけませんでしょうか?

尚、スライダーの数はABCだったりABCDEFだったりと変化するので、AにはAのjavascriptを書いて、BにはBのjavascriptを書いて、、というのは避けたいです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

.each()メソッドなどで.slideごとに処理すればいいかと思います。slideCurrentなどの変数はクロージャが作られるので問題ないかと。

投稿2018/02/28 00:58

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/28 01:10

難しそうですね。ご回答ありがとうございます。
guest

0

スライダーが複数あるなら、共通部分をclassにまとめてしまうのが無難な気がします。
JavaScriptのclassは他の言語(C++, Java, PHP, ...)のclassと同じようなものです。他の言語の経験があれば、理解ができるかなと思います。

もし、今までclassに触れたことがないという場合は、学習をオススメします。

classを定義した後に、スライダー毎にnewを実行すれば、スライダー毎のインスタンスが生成できます。
スライダー毎に異なるもの(IDとかDOMとか)をコンストラクタの引数に設定すればよいと思います。
click処理やanimate処理は、classのメソッド(関数)として定義します。

ただ、JavaScriptのバージョンが古い場合、classが使えないこともあります。その場合は、代わりにprototypeというものを使えば、コード量が増えますが、同じようなことはできます。

投稿2018/02/28 01:41

segur

総合スコア73

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/28 08:00

ありがとうございます。 実はスライダーの画像はwordpressの記事ごとに大量に存在するので、 >スライダー毎にnewを実行 というのが億劫なのです。 スライダー毎の設定をせず、一つのコードですべてのスライダーを一括で機能させることができればいいなと思っているのですが。。
segur

2018/02/28 08:19

ページ内のすべてのスライダーに対して、一括して設定をしたいなら、他の回答者様もおっしゃっているeachを使うことになると思います。 Sliderというclassが存在している前提になってしまいますが、以下のように書けば、全てのスライダーのインスタンスを一気に生成できると思います。(動作確認はしていません。申し訳ありません) $('.slideSet').each(function(){ new Slider($(this)); }); 今回の場合、$('.slideSet')に該当する要素<div class="slideSet">は、2か所あります。 $('.slideSet').each()は、for文みたいに、複数の要素を1つずつアクセスできるものと思ってください。$(this)でその要素にアクセスできます。 これで、要素が何個あろうと、すべての要素に一気に設定ができます。 この仕組みを使えば、何とかなるのではないでしょうか?
退会済みユーザー

退会済みユーザー

2018/02/28 20:55

ありがとうございます。頭がパンクしてしまいましたが、幸運なことに別の方のご回答を戴きました。(^◇^) 今回ベストアンサーは譲ってあげてください。
segur

2018/02/28 23:37

解決してよかったです
guest

0

ベストアンサー

jsfiddleのJSを改修。
slideSet要素自体に定義していたデータを持たせています。
sliding関数にクリックした要素を渡し、実行しています。
他の回答者がおっしゃるように、最初のデータをセットするのにeachを使っています。
良ければお試しください。

javascript

1(function(){ 2 3// 初期設定 4$('.slideSet').each(function(index,element){ 5 var $this = $(element); 6 var $slides = $this.find('.slide'); 7 $this.data('slideWidth' , $slides.eq(0).outerWidth()); 8 $this.data('slideNum' , $slides.length); 9 $this.data('slideSetWidth' , 10 $slides.eq(0).outerWidth() * $this.data('slideNum') ); 11 $this.css('width', $this.data('slideSetWidth')); 12 13 14 $this.data('slideCurrent', 0); 15 16}); 17 /* var slideWidth = $('.slide').outerWidth(); // .slideの幅を取得して代入 18 var slideNum = $('.slide').length; // .slideの数を取得して代入 19 var slideSetWidth = slideWidth * slideNum; // .slideの幅×数で求めた値を代入 20 $('.slideSet').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 21 22 var slideCurrent = 0; */ 23 24 25 // アニメーションを実行する独自関数 26 var sliding = function($this){ 27 28 var slideCurrent = $this.data('slideCurrent'); // クリックした要素の現在地 29 var slideNum = $this.data('slideNum'); 30 var slideWidth = $this.data('slideWidth'); 31 32 // slideCurrentが0以下だったら 33 if( slideCurrent < 0 ){ 34 slideCurrent = slideNum - 1; 35 36 // slideCurrentがslideNumを超えたら 37 }else if( slideCurrent > slideNum - 1 ){ // slideCUrrent >= slideNumでも可 38 slideCurrent = 0; 39 40 } 41 42 $this.stop().animate({ 43 left: slideCurrent * -slideWidth 44 }); 45 46 $this.data('slideCurrent' , slideCurrent); // 移動したので再代入 47 } 48 49 50 // 画像が押されたとき 51 $('.slideSet').click(function(){ 52 var $this = $(this); 53 54 var num = $this.data('slideCurrent') + 1; 55 $('body').append('<p>'+num+'</p>'); 56 $this.data('slideCurrent',num); 57 sliding($this); 58 }); 59 60}()); 61 62

投稿2018/02/28 13:27

kensii

総合スコア191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/28 19:39

わぁ、ありがとうございます。助かりました!大感謝です。 ところで、<p>タグで数字を出しているのは、どうしてでしょうか? $('body').append('<p>'+num+'</p>'); これがなくても動くので、これは何のためかなぁと思いまして。 よろしければ教えてくださいませ。
kensii

2018/03/01 00:23

あ、すいません。デバッグで適当に出力させてただけでした。消して問題ないです。
退会済みユーザー

退会済みユーザー

2018/03/01 01:10

あ、なるほど。ありがとうございます。不安だったのでご回答いただけて良かったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問