- 締切済み
html内にスライドショーを複数設置
こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか？当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。
- aaaaym
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1、2です。 aaaaymさんが作成なさったコードではなく、参照先のコードをひとつのセットとしてそれを必要なだけ（idや名前等を替えて）設置してくださいという意味です。 具体的には、もとのコードが function slideSwitch() { ～～～～～～～ } setInterval(slideSwitch, 2100 ); という構成になっているとすれば、2個目は、 function slideSwitch2() { ～～～～～～～ } setInterval(slideSwitch2, 2100 ); といった按配です。（もちろんidその他も変更してください） この方法だと、何十個もあると面倒なことになるので、個別に制御したい要素（例として、対象要素、切替わり時間、切替わり間隔）を可変にできるようにしておいて、必要な回数呼び出せば良いというような発想になるかと思います。 以下、書きっぱなしの例なので、かなりいい加減ですが… （切替えの方法なども、ご参考のサイトとは少し変えています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .slideshow { position:relative; } .slideshow img{ position:absolute; top:0; left:0; display:none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var SS = function(e, s, i){ this.speed = s; this.interval = i; this.index = 0; this.elements = $("img", e); } SS.init = function(e){ var img = this.elements.eq(0); e.addClass("slideshow") .css({width:img.width(), height:img.height()}); img.show(); } SS.prototype = { change : function(){ this.elements.eq(this.index++).fadeOut(this.speed); this.index %= this.elements.length; this.elements.eq(this.index).fadeIn(this.speed); }, start : function(){ var obj = this; if(!obj.slideID) obj.slideID = setInterval(function(){ obj.change()}, obj.interval); }, stop : function(){ clearInterval(this.slideID); this.slideId = null; } } var SlideShow = function(id, fadeSpeed, interval){ var e = $("#" + id); var s = new SS(e, fadeSpeed, interval); SS.init.call(s, e); return s; } // ---------------------------------- /* arguments : elementID, fadeDuration, timerInterval */ SlideShow("slideshow1", 400, 2000).start(); SlideShow("slideshow2", 1200, 3000).start(); }); </script> </head> <body> <div id="slideshow1"> <img src="img/photo01.jpg" alt=""> <img src="img/photo02.jpg" alt=""> <img src="img/photo03.jpg" alt=""> </div> <div id="slideshow2"> <img src="img/photo01.jpg" alt=""> <img src="img/photo02.jpg" alt=""> <img src="img/photo03.jpg" alt=""> <img src="img/photo04.jpg" alt=""> <img src="img/photo05.jpg" alt=""> </div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 ＞それぞれに対して処理されるように書くにはどうすればいいのでしょうか？ ＞詳しく教えていただけないでしょうか？ 一番簡単な方法は、同じ内容を名前を変えて必要な回数だけ記述する方法です。 もう少し効率的・効果的に行なおうとするなら、 処理を、対象を引数とする関数にしておいて、必要な回数だけ呼び出す。 機能をオブジェクト化しておいて、必要なだけインスタンスを作成する。 などの方法が考えられます。 こちらの方法については説明が長くなるので、検索などして調べてみてください。
お礼
回答ありがとうございます。 ANo1さんの仰ったようにしてみました。 <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active2 = $('#slideshow2 img.active2'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); if ( $active2.length == 0 ) $active2 = $('#slideshow2 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); var $next = $active2.next().length ? $active2.next() : $('#slideshow2 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); $active2.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active2.removeClass('active2 last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active2" /></p> こういうことで合っているのでしょうか？二番目のスライドのactive名を変更して入力をしてみても片方のみしか正常に動かないです・・・。 間違っている場所のご指摘をお願いしたいです・・・。 ご回答お願いいたします。
- fujillin
- ベストアンサー率61% (1594/2576)
最初の ＞var $active = $('#slideshow img.active'); ＞var $active = $('#slideshow2 img.active'); ＞var $active = $('#slideshow3 img.active'); を実行した時点で、変数$activeには最後の#slideshow3に関する値が入っていることになりますので、その後の処理で$activeを参照しても、常に#slideshow3に関する処理だけが行なわれることになります。 このため、ご質問のような結果になっているのでしょう。 同時に処理したいのなら、それぞれのラッパーに対して処理されるようにしてあげればよろしいかと。
お礼
回答ありがとうございます。 それぞれのラッパーに対して処理されるように書くにはどうすればいいのでしょうか？詳しく教えていただけないでしょうか？ ご回答お願い致します。
お礼
回答ありがとうございます。 fujillinさんが書いて下さったコードを参考にしたところ、個々のスライドが動くようになりました！！解決できてうれしいです！！詳しく書いて下さって本当にありがとうございます！！