JavaScriptの教材用に作成した、スライドショーのサンプルスクリプト。
意外と短く書けたので公開。

Safari,Firefox,Chromeで動作確認。IEは今、手元に環境が無いので未チェック。

一般的なスライドショーと異なり、子要素の一番後ろから逆順にアクティブなスライドになる仕様。

もっと簡潔に書く方法はあるのだろうか。

HTML

<ul id="slideshow">
	<li style="background: blue;">JKL</li>
	<li style="background: green;">GHI</li>
	<li style="background: red;">DEF</li>
	<li style="background: orange;">ABC</li>
</ul>

CSS

# slideshow {
	position: relative;
	display: block;
	width: 200px;
	height: 200px;
}
# slideshow li {
	display: block;
	position:absolute;
	width:200px;
	height: 200px;
	text-align: center;
	line-height:  200px;
	border:solid 1px black;
}

JavaScript

 function slideshow(target){
	setTimeout(function(){
		var slide = $(target).children().last();
		$(slide).fadeOut(1000,function(){
			$(target).prepend(slide);
			$(slide).show();
			slideshow(target);
		});
	},3000);
}
slideshow('#slideshow');