JQUERY slideshowについて
slide-show.jsについての質問です。
ホームページのトップイメージにスライドショーで3枚の写真を動かしています。
で、トップページの写真を9枚にして、左3枚・真ん中3枚・右3枚というふうに動かしたいです。
トップイメージの写真(幅900px)3枚を
トップイメージの写真(幅300px)×3を3枚スライドにする
(意味不明ですか・・・)
下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。
出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。
写真の切り替えは、CSSのZーindexを使っています。
現在のHTML
<div id='slideshow01'>
<!--スライドショーの3枚ここ!-->
<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" />
<!--スライドショーの3枚終わり-->
</div>
求めるHTML
<div id='slideshow01'>
<!--スライドショーの3枚ここ!-->
<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" />
<!--スライドショーの3枚終わり-->
</div>
<div id='slideshow02'>
<!--スライドショーの3枚ここ!-->
<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" />
<!--スライドショーの3枚終わり-->
</div>
<div id='slideshow03'>
<!--スライドショーの3枚ここ!-->
<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" />
<!--スライドショーの3枚終わり-->
</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 );
});
お礼
早速の回答ありがとうございます。 やはりダメでしたか・・・ いろいろ調べてみた結果、見つからなかったためココで質問してみたのですが。 しかし、わざわざ調べていただいた上、URLまで教えていただいただけでもとても感謝しております。自分が一生懸命調べても全く見つからなかったのに、まさかこんなに丁寧な回答が頂けるとは思っていませんでした。 本当に感謝しています!