setIntervalを使って複数画像をフェードインフェードアウトで切替表示する方法【jQuery】

setIntervalを使って3枚のjpg画像をフェードインフェードアウトで切替表示を繰り返す方法をご紹介します。

複数のjpg画像を1枚しか見えない様に重ねたCSS記述

※複数のjpg画像を1枚しか見えない様に重ねて表示される様にしてます。必要に応じて変更して下さい。

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

複数画像をフェードインフェードアウト切替表示するJavaScriptの記述

※fadeIn、fadeOutをsetIntervalを使って繰り返し画像を切り替えてます。

<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枚のjpg画像を設定したHTML記述

※3枚のjpg画像を1枚しか見えない様に重ねて表示します。

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

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

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

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

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。