###前提・実現したいこと
初めてこちらに質問させていただきます。
今ページ内にある複数の画像を、数秒ごとに切り替わるギャラリーを作っていまして、
それぞれ違う数の画像を繰り返しフェードさせたいと思っています。
参考にしたのはこちら(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); });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/17 07:48