Simple jQuery Slideshow

もっとかんたんに超軽量スクリプトでクロスフェードを入れてみました。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>

カテゴリー : イラスト, チップス