- 締切済み
JQUERY slideshowについて
slide-show.jsについての質問です。 ホームページのトップイメージにスライドショーで３枚の写真を動かしています。 で、トップページの写真を９枚にして、左３枚・真ん中３枚・右３枚というふうに動かしたいです。 トップイメージの写真（幅900px）３枚を トップイメージの写真（幅300ｐｘ）×３を３枚スライドにする （意味不明ですか・・・） 下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。 出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。 写真の切り替えは、ＣＳＳのＺーindexを使っています。 現在のＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> 求めるＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow02'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow03'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> この js を使っています。 function slideSwitch() { var $active = $('#slideshow01 img.active'); if ( $active.length == 0 ) $active = $('#slideshow01 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow01 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()", 4000 ); });
- papa5588
- お礼率0% (0/5)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかってませんけれど、こんな感じ？ （グループ数制限なし、グループ内の画像枚数制限なし） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #slideshow01 img { width: 300px; height:400px; } #slideshow02 img { width: 200px; height:100px; } #slideshow03 img { width: 400px; height:300px; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.5");</script> <script type="text/javascript"> <!-- var slideSwitch = (function($){ var slide = function(id, interval){ this.elements = $("#" + id).children("img"); this.interval = Math.max(interval, 1200); this.intervalId = null; } var fade = function(obj){ return function(){ fader.call(obj); } } var fader = function(){ var elm = this.elements, active = elm.filter(".active"); var next = active.next("img:first"); if(!next.length) next = elm.filter(":first"); active.removeClass("active").fadeOut(500, function(){ next.addClass("active").fadeIn(500); }); } var init = function(id, interval){ var ss = new slide(id, interval), elm = ss.elements; if(!elm.filter(".active").length) elm.filter(":first").addClass("active"); elm.not(".active").hide(); ss.intervalId = setInterval(fade(ss), ss.interval); return ss; } return init; })(jQuery); // 設定部分（対象要素のid, 切替間隔(msec)) $(function(){ slideSwitch("slideshow01", 4000); slideSwitch("slideshow02", 4500); slideSwitch("slideshow03", 5000); }); //--> </script> </head> <body> <div id="slideshow01"> <img src="A.jpg" alt=""> <img src="B.jpg" alt=""> <img src="C.jpg" alt=""> </div> <div id="slideshow02"> <img src="D.jpg" alt=""> <img src="E.jpg" alt=""> <img src="F.jpg" alt=""> </div> <div id="slideshow03"> <img src="G.jpg" alt=""> <img src="H.jpg" alt=""> <img src="I.jpg" class="active" alt=""> </div> </body> </html>
