jQueryを使って複数画像をフェードインフェードアウトで切替表示

今回はシンプルに3枚のjpg画像をフェードインフェードアウトで切替表示し、
setIntervalを使用して切替えを繰り返してみます。

1．CSSの記述例

以下は調整してみて下さい。

<style type="text/css">
<!--
.clImg{
	position:relative;
	width:200px;
	margin:0 auto;
}
.clImg img {
	position:absolute;
	left:0;
	top:0;
}
-->
</style>

2．読込むJsとJavaScriptの記述例

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.clImg img:gt(0)').hide();
	setInterval(function() {
		$('.clImg :first-child').fadeOut().next('img').fadeIn().end().appendTo('.clImg');
	},3000);
});
</script>

3．HTMLの記述例

<div class="clImg">
        <img src="i01.jpg" alt="1枚目の画像">
<img src="i02.jpg" alt="2枚目の画像">
<img src="i03.jpg" alt="3枚目の画像"></div>

jQueryを使用して複数画像をフェードインフェードアウトで切替表示デモ

左右の矢印や切替り画像枚数のチップ画像（コントローラ？）的なものが必要無い場合はこれがシンプルで良い気がしますね。

※流用される場合は自己責任でお願いします。