Simple jQuery Slideshow

2012年2月21日  

超軽量スクリプトでクロスフェードを入れてみました。
Jon Raasch’s blog を参考にしています。
WordPress で使う時には $ を jQuery に書き換えます。
さらに LabPad を参考にして画像リンクの設定をしてあります。
※現在停止中です。

（参考）

1）header.php にスクリプトを入れます。

<script type="text/javascript">
function slideSwitch() {
var $active = jQuery('#slideshow a.active');
if ( $active.length == 0 ) $active = jQuery('#slideshow a:last');
var $next =  $active.next().length ? $active.next()
: jQuery('#slideshow a:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
jQuery(function() {
setInterval( "slideSwitch()", 6000 );
});
</script>

2）HTML は、こんな感じ。

<div id="slideshow">
<a class="active" href="#"><img src="pi-kun.gif" /></a>
<a href="#"><img src="pi-kun2.gif" /></a>
<a href="#"><img src="pi-kun3.gif" /></a>
</div>

3）CSS で調整します。

<style type="text/css">
#slideshow { position:relative; width:685x; height:282px; }
#slideshow a { position:absolute; top:0; left:0; z-index:8; opacity:0.0; }
#slideshow a.active { z-index:10; opacity:1.0; }
#slideshow a.last-active { z-index:9; }
</style>

カテゴリー : チップス