【フェーダー】スライダーを使わずにjQueryでスライドショーを実装

画像のスライドショーはスライダーを使うのが一般的ですが、スライダーを使わずに自作のjQueryで実装します。

htmlのコードは下記になります。divタグに画像を内包したシンプルな構造です。

<div class="group_imageWrap">
	<div class="group_image"><img src="fade01.jpg" alt=""></div>
	<div class="group_image"><img src="fade02.jpg" alt=""></div>
	<div class="group_image"><img src="fade03.jpg" alt=""></div>
	<div class="group_image"><img src="fade04.jpg" alt=""></div>
</div>

続いてCSSのコードです。
画像を内包するdivタグはposition: absolute、top: 0、left: 0を指定して、全て重ねて配置します。またopacity: 0で非表示にします。フェードイン、フェードアウトの動作はtransitionで設定します。ここでは0.5sかけて動作させます。transition-delayはフェードアウトの時のみ実行します。少し遅らせて実行することで画面が真っ白になってしまうのを防ぎます。
divタグにクラス名isCurrentが付与された時のみposition: relativeで画像を配置し、opacity: 1で表示させます。クラス名isCurrentが付与された時の動作はフェードインになりますが、遅らせてフェードインさせる必要はないのでtransition-delayを0sに設定します。

.group_imageWrap {
	position: relative;
}
.group_image {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition-duration: 0.5s;
	transition-property: opacity;
	transition-delay: 0.2s;
}
.group_image.isCurrent {
	z-index: 1;
	position: relative;
	opacity: 1;
	transition-delay: 0s;
}

最後にjQueryのコードです。
まず最初に1番目の画像を内包するdivタグにクラス名isCurrentを付与します。次の処理はsetIntervalで3.5秒後に実行します。divタグからクラス名isCurrentを削除し、2番目の画像を内包するdivタグにクラス名isCurrentを付与します。これを画像を内包するdivタグの数だけ繰り返していき、全ての画像を表示したら変数nextを0に初期化して1番目の画像の表示に戻ります。

$(function() {
	setInterval(function () {
		var index = $('.group_image').index($('.group_image.isCurrent')),
		next = index + 1;
		if (next === $('.group_image').length) {
			next = 0;
		}
		$('.group_image.isCurrent').removeClass('isCurrent');
		$('.group_image').eq(next).addClass('isCurrent');
	}, 3500);
	$('.group_image').eq(0).addClass('isCurrent');
});