- ベストアンサー
jqueryを使用したスライドショーのバグについて
- jqueryを使用して同一ページ内に複数のスライドショーを作成した際にバグが発生しています。
- おそらく変数のバッティングが原因でphotogallery1とphotogallery2が干渉しあっています。
- バッティングを防ぐための対処方法について教示していただけると助かります。
- yukiponta
- お礼率52% (66/125)
- JavaScript
- 回答数6
- ありがとう数0
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
A No5です。 処理の意図を読み違えていたかもしれません。 （どのようなHTML構成に対して、どのような処理を意図しているのかわかりかねますので…） var photo = $("photoBox > li", this); ではなくて、「each」の処理をはずして、 var photo = $("photoBox > li", $(selector)); とするのが、質問者様の意図に近いのかも…？
その他の回答 (5)
- fujillin
- ベストアンサー率61% (1594/2576)
HTMLやＣＳＳが不明なので、ざっと斜めに眺めただけですが… ＞$(selector).each(function(){ ＞ var photo = $(".photoBox").find('li'); ＞ var thumb = $(".thumbBox").find('li'); ・・・・・・ 複数のグループに対応したければ、この時点で対象を間違えていませんか？ 例えば ＞var photo = $(".photoBox").find('li'); だと、ドキュメント全体からclass="photoBox"の要素を拾ってしまうので、eachで処理している意図と矛盾がありませんか？ var photo = $("photoBox > li", this); などとしておけば、指定セレクタ内のphotoBox直下のli要素が取得できるはずです。 (お考えの構成ではliの子孫要素にul、liなどは存在しないかもしれませんが…） 他の要素取得に関しても同様の注意をなされば、とりあえず動作するのではないかと思います。 とりあえずの原因はこのあたりにあるのではないでしょうか。
- CyberCypher
- ベストアンサー率73% (39/53)
evalでjavascriptの式を評価し、動的に変数を確保しています。 未検証のため申し訳ないのですが以下を組んでみました あとバグの内容を具体的に示してくれると他の方も分かるかと…… case1：時間の経過がおかしい(timerが原因？) case2：画像が順番通りに表示されない(nowBoxが原因？) など、今回はTimerだけを置き換えてみました $(function(){ pg('#photogallery1', 0); pg('#photogallery2', 1); function pg(selector, keyNo){ $(selector).each(function(){ var photo = $(".photoBox").find('li'); var thumb = $(".thumbBox").find('li'); var fadeSpeed = 400; var changeSpeed = 4000; var photoLength = photo.length; var nowBox = 0; photo.filter(":not(':eq(0)')").hide(); eval("var timer" + keyNo + " = setInterval(slideshow , changeSpeed);"); function slideshow(){ if(nowBox == photoLength - 1){ photo.fadeTo(fadeSpeed , 0); nowBox = 0; photo.eq(nowBox).fadeTo(fadeSpeed , 1); }else{ photo.fadeTo(fadeSpeed , 0); nowBox ++; photo.eq(nowBox).fadeTo(fadeSpeed , 1); } }; thumb.hover(function(){ eval("clearInterval(timer" + keyNo + ");"); $(this).stop().fadeTo(fadeSpeed , 0.6); nowBox = $(this).index(); photo.stop().fadeTo(fadeSpeed , 0) .eq(nowBox).stop().fadeTo(fadeSpeed , 1); },function(){ eval("var timer" + keyNo + " = setInterval(slideshow , changeSpeed);"); $(this).stop().fadeTo(fadeSpeed , 1); }); }); }; });
補足
こちら試してみましたが動きませんでした。 実際複数つけなければ思い通りうごきますが、 複数つける場合に問題になっています。 ありがとうございます。
- CyberCypher
- ベストアンサー率73% (39/53)
これは単体で動くのでしょうか？ 単体で動けば何度呼んでも大丈夫な気がしますが…… var nowBox = 0 ↓ var nowBox = 0; 急いでるようなので見つけ次第コメントさせて頂きますm(_ _)m
- CyberCypher
- ベストアンサー率73% (39/53)
すみませぬ、括弧の数を俺が見間違えてました 俺のほうがよく見ろって話ですよねorz
- CyberCypher
- ベストアンサー率73% (39/53)
最後から二行目 }; ↓ }); じゃないかな？ インデントとか行頭揃えて見やすくすればケアレスミス無くせるんじゃない？
補足
コメントありがとうございます。 };←これで間違ってはいません。またインデントの件ですが、 インデントをつけていてもコピー＆ペーストすると解除されてしまいますので、本当のソースはつけています。
補足
ご回答ありがとうございます。 おっしゃる通りにやったら複数動くようにはなりましたが、 片方が一度動いた後自動で動かなくなってしまいました。 ソースとjsを表記いたしますので、申し訳ございませんがみていただけませんでしょうか。 $(function(){ pg('#photogallery1'); pg('#photogallery2'); function pg(selector){ var photo = $(".photoBox > li", $(selector)); var thumb = $(".thumbBox > li", $(selector)); var fadeSpeed = 400; var changeSpeed = 4000; var photoLength = photo.length; var nowBox = 0 photo.filter(":not(':eq(0)')").hide(); var timer = setInterval(slideshow , changeSpeed); function slideshow(){ if(nowBox == photoLength - 1){ photo.fadeTo(fadeSpeed , 0); nowBox = 0; photo.eq(nowBox).fadeTo(fadeSpeed , 1); }else{ photo.fadeTo(fadeSpeed , 0); nowBox ++; photo.eq(nowBox).fadeTo(fadeSpeed , 1); } }; thumb.hover(function(){ clearInterval(timer); $(this).stop().fadeTo(fadeSpeed , 0.6); nowBox = $(this).index(); photo.stop().fadeTo(fadeSpeed , 0) .eq(nowBox).stop().fadeTo(fadeSpeed , 1); },function(){ timer = setInterval(slideshow , changeSpeed); $(this).stop().fadeTo(fadeSpeed , 1); }); }; }); <body> <div id="wrap"> <div id="photogallery1" class="clearfix"> <ul class="photoBox clearfix"> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo3.jpg" alt="" /></a></li> </ul> <ul class="thumbBox clearfix"> <li class="first"><a href="#"><img src="img/thumb1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/thumb2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/thumb3.jpg" alt="" /></a></li> </ul> </div> <div id="photogallery2" class="clearfix"> <ul class="photoBox clearfix"> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo3.jpg" alt="" /></a></li> </ul> <ul class="thumbBox clearfix"> <li class="first"><a href="#"><img src="img/thumb1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/thumb2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/thumb3.jpg" alt="" /></a></li> </ul> </div> </div><!--#wrap.end --> </body>