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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2486閲覧

ギャラリーページで複数の要素に対して繰り返し処理ができません

takopo

総合スコア484

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/17 04:48

###前提・実現したいこと
初めてこちらに質問させていただきます。
今ページ内にある複数の画像を、数秒ごとに切り替わるギャラリーを作っていまして、
それぞれ違う数の画像を繰り返しフェードさせたいと思っています。

参考にしたのはこちら(http://on-ze.com/archives/1388)のページで、
このボックスをページ内に複数配置するイメージになります。
ボックスが1つの時はうまく動作するのですが、ボックスを増やすとなぜかエラーが出てしまいます。

いろいろ試してみたのですが、原因がどうしても分からず困っていまして、
どなたかご教授いただけますと大変助かります。

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

###発生している問題・エラーメッセージ

ページを開くと、それぞれ1枚目の画像だけが表示されて、フェードインが始まりません。

###該当のソースコード

■ html <div class="box"> <ul class="slide"> <li><img src="first/01.jpg"></li> <li><img src="first/02.jpg"></li> <li><img src="first/03.jpg"></li> </ul> </div> <div class="box"> <ul class="slide"> <li><img src="second/01.jpg"></li> <li><img src="second/02.jpg"></li> <li><img src="second/03.jpg"></li> <li><img src="second/04.jpg"></li> </ul> </div> <div class="box"> <ul class="slide"> <li><img src="third/01.jpg"></li> <li><img src="third/02.jpg"></li> <li><img src="third/03.jpg"></li> <li><img src="third/04.jpg"></li> <li><img src="third/05.jpg"></li> </ul> </div> ■ css .slide { position: relative; width: 640px; height: 300px; margin: 0 auto; } .slide img { position: absolute; left: 0; top: 0; } ■ js $(function(){ // 設定 var $width = 640; // 横幅 var $height = 300; // 高さ var $interval = 3000; // 切り替わりの間隔(ミリ秒) var $fade_speed = 1000; // フェード処理の早さ(ミリ秒) $('.box').each(function() { // 枠の位置を調整していったん消す $(this).find(".slide li").hide().css({"position":"absolute","top":0,"left":0}); // 最初の画像に.activeクラスをつけて表示させる $(this).find(".slide li:first-child").addClass("active").show(); // 画像を数秒おきにフェードインさせて、最後まで行くと最初の画像に戻って繰り返す setInterval(function(){ // 現在の画像を変数に格納 var $active = $(this).find(".active"); console.log($active.html()); // ←ここがundefinedになってしまいます // activeの次に画像があればそれを、なければ最初の画像を$nextに格納 var $next = $active.next("li").length ? $active.next("li") : $(this).find(".slide li:first-child"); // 現在の画像をフェードアウトさせて.activeクラスを削除 $active.fadeOut($fade_speed).removeClass("active"); // 次の画像をフェードインさせて.activeクラスをつける $next.fadeIn($fade_speed).addClass("active"); },$interval); }); });

###試したこと
ボックスが1つだけの時は下の記述で動きました。
こちらでも複数のギャラリーは動くのですが、これだと全てのボックスが同時にスタートするため、
例えば3枚、4枚、5枚があった場合、3枚のボックスが先に終わってしまい、
他のボックスが全部終わるまで真っ白になってしまいます。
なので、ボックスがそれぞれ別々に動くように、eachメソッドを使って試しました。

$(function(){ // 設定 var $width = 640; // 横幅 var $height = 300; // 高さ var $interval = 3000; // 切り替わりの間隔(ミリ秒) var $fade_speed = 1000; // フェード処理の早さ(ミリ秒) // 枠の位置を調整していったん消す $(".slide li").hide().css({"position":"absolute","top":0,"left":0}); // 最初の画像に.activeクラスをつけて表示させる $(".slide li:first").addClass("active").show(); // 画像を数秒おきにフェードインさせて、最後まで行くと最初の画像に戻って繰り返す setInterval(function(){ // 現在の画像を変数に格納 var $active = $(".active"); console.log($active.html()); // activeの次に画像があればそれを、なければ最初の画像を$nextに格納 var $next = $active.next("li").length ? $active.next("li") : $(".slide li:first"); // 現在の画像をフェードアウトさせて.activeクラスを削除 $active.fadeOut($fade_speed).removeClass("active"); // 次の画像をフェードインさせて.activeクラスをつける $next.fadeIn($fade_speed).addClass("active"); },$interval); });

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

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

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

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

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

guest

回答2

0

$active.next("li").length の判定が良くないようです。次に画像がなくても、.lengthは0にはなりません。
判定には、$active.html()がundefinedになることを利用するようにしました。

JavaScript

1$(function() { 2 3 // 設定 4 var $width = 640; // 横幅 5 var $height = 300; // 高さ 6 var $interval = 3000; // 切り替わりの間隔(ミリ秒) 7 var $fade_speed = 1000; // フェード処理の早さ(ミリ秒) 8 9 $('.box').each(function() { 10 // 枠の位置を調整していったん消す 11 $(this).find(".slide li").hide().css({ 12 "position" : "absolute", 13 "top" : 0, 14 "left" : 0 15 }); 16 17 var $first_child = $(this).find(".slide li:first-child"); 18 19 // 最初の画像に表示させる 20 var $active = $first_child.show(); 21 22 // 画像を数秒おきにフェードインさせて、最後まで行くと最初の画像に戻って繰り返す 23 setInterval(function() { 24 // activeの次に画像を$nextに格納 25 var $next = $active.next(); 26 27 // activeの次に画像がなければ最初の画像を$nextに格納 28 if (! $next.html()) { 29 $next = $first_child; 30 } 31 32 // 現在の画像をフェードアウト 33 $active.fadeOut($fade_speed); 34 35 // 次の画像をフェードイン 36 $next.fadeIn($fade_speed); 37 38 $active = $next; 39 }, $interval); 40 }); 41});

投稿2016/12/17 07:22

naomi3

総合スコア1105

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

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

takopo

2016/12/17 07:48

なるほどこういう方法もあるのですね。こちらでも無事動きました。 $active.next("li").length の判定が良くないと分かり大変勉強になります。 ご回答ありがとうございました!
guest

0

ベストアンサー

こんな感じでどうでしょう。

JavaScript

1$('.box').each(function() { 2 var $_self = $(this); // これ以降の $(this) を $_self に置き換え 3 // 枠の位置を調整していったん消す 4 /* 略 */ 5});

投稿2016/12/17 06:03

kei344

総合スコア69364

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

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

takopo

2016/12/17 06:20

ご回答ありがとうございます!こちらの記述でうまく動作しました。 thisを変数に置き換えればよかったんですね。 なぜこのやり方がいいのか理解できていないので、少し調べてみたいと思います。 初めてこのサイトで質問させていただいたのですが、 すぐに回答が来て解決できたことに驚いています。 本当にありがとうございました。
kei344

2016/12/17 06:26

> なぜこのやり方がいいのか理解できていないので、少し調べてみたいと思います。 JavaScript において this は結構難しいので、がんばってください!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問