jQueryでスライドショーを作る

http://labo.omnioo.com/develop/jqueryUI/smple_slide_show01/index.php
比較的安定してソースが綺麗で大変使いやすいので愛用しております。どこかで見つけたソースなのですが…。
サンプルでは8秒でスライド、下部リンクでそれぞれの画像に移動というような機能になっています。fadeIn(),fadeOut()ではなくてopacityを使っているところがいいです。背景にはあえて画像を入れていて、それが切り替わるようになっているので、カスタマイズすると結構かっこよくできます。

jQuery
<script type="text/javascript">
$(function(){
var setId = '#slideshow';
var setBlock = '.slide';
var fadeTime = 1000;
var delayTime = 8000;

$(setId + ' div' + setBlock + ' div').each(function(i){
$(this).attr('id','view' + (i + 1).toString());
$(setId + ' div' + setBlock + ' div').css({zIndex:'98',opacity:'0'});
$(setId + ' div' + setBlock + ' div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
});

//インデックスをクリックした時のアクション
$(setId + ' ul li').click(function(){
clearInterval(setTimer);

var connectCont = $(setId + ' ul li').index(this);
var showCont = connectCont+1;

$(setId + ' div' + setBlock + ' div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})});
$(setId + ' div' + setBlock + ' div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})});

$(this).addClass('active');
$(this).siblings().removeClass('active');

timer();
});

//インデックス部分にホバーした時の背景チェンジ
$(setId + ' ul li:not(.active)').hover(function(){//インデックスにホバーした時
$(this).stop().animate({opacity:'1'},200);
$(this).css('background','url(./images/bg2.png)');
},function(){//インデックスのホバーしていない部分の処理
$(this).stop().animate({opacity:'0.5'},200);
$(this).css('background','url(./images/bg.png)');
});

$(setId + ' ul li').css({opacity:'0.5'});//アクセス時は一旦全部のインデックスを非アクティブ
$(setId + ' ul li:first').addClass('active');//それから、最初のインデックスをアクティブにする

timer();

function timer() {
setTimer = setInterval(function(){
$('li.active').each(function(){
var listLengh = $(setId + ' ul li').length;//リストの数を取得する(4つ)
var listIndex = $(setId + ' ul li').index(this);//表示中のリスト番号を返す
var listCount = listIndex+1;//スライドしている画像の番号(0~)

if(listLengh == listCount){
$(setId + ' ul li:first').click();
} else {
$(this).next('li').click();
};
});
},delayTime);
};

//画像にホバーしたらスライドショーをストップする
$(setId).mouseover(function(){
clearInterval(setTimer);
}).mousemove(function(){
clearInterval(setTimer);
}).mouseout(function(){
timer();
});
});
</script>

HTMLはこちら
<div id="slideshow">

<div class='slide'>
<div><a href="http://www.omnioo.com/record/javascriptjquery/jquery_slideshow01/"><img src="./images/photo01.jpg" /></a></div>
<div><a href="http://www.omnioo.com/record/javascriptjquery/jquery_slideshow01/"><img src="./images/photo02.jpg" /></a></div>
<div><a href="http://www.omnioo.com/record/javascriptjquery/jquery_slideshow01/"><img src="./images/photo03.jpg" /></a></div>
<div><a href="http://www.omnioo.com/record/javascriptjquery/jquery_slideshow01/"><img src="./images/photo04.jpg" /></a></div>
</div>

<ul>
<li><a href="javascript:void(0);">あいうえお</a></li>
<li><a href="javascript:void(0);">かきくけこ</a></li>
<li><a href="javascript:void(0);">さしすせそ</a></li>
<li><a href="javascript:void(0);">たちつてと</a></li>
</ul>

</div>

 

CSSのサンプルはこれ
#slideshow {
margin: 0 auto;
width: 1200px;
text-align: left;
}
#slideshow div.slide {
width: 1200px;
height: 900px;
overflow: hidden;
position: relative;
}
#slideshow div.slide div {
top: 0;
left: 0;
position: absolute;
}

#slideshow ul {
width: 400px;
}

#slideshow ul li {
width: 100px;
float: left;
display: inline;
}
#slideshow ul li a {
color: #555;
text-decoration:none;
}
#slideshow .active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
#slideshow #arrow {
position: absolute;
top: 100px;
center;
z-index:100;
}
#slideshow ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#slideshow ul {
display: inline-block;
overflow: hidden;
z-index:10000;
}
#slideshow ul li {
background:url(./images/bg.png);
}