プラグインに頼らず自力でjQueryのスライドショーを作る方法（はじめてのスライドショー作成編）

2013/06/21

【ステップ２】CSSの透明度を変えることで実現する

最終目標のスライドインを実現するためにopacityで透明度を変えることでフェードイン・フェードアウトを実現してみます。

<style type="text/css">;
	#slideShow img{
		/* 全てを透明にして、画像を重ねる */
		opacity: 0;
		position: absolute;
	}
	#slideShow .img1{
		/* 1枚目の画像だけ表示 */
		opacity: 1;
	}
</style>

CSSは、「display」を「opacity」での指定に変更します。

<script type="text/javascript">;
	var flg=2;	//「2枚目に切り替え」からスタートするため、flg に 2 をセット

	$(function(){

		setInterval(function() {
			switch(flg){
				case 1:
					//1枚目に切り替え
					$(".img3").animate({opacity:0});
					$(".img1").animate({opacity:1},"slow");
					break;

				case 2:
					//2枚目に切り替え
					$(".img1").animate({opacity:0});
					$(".img2").animate({opacity:1},"slow");
					break;

				case 3:
					//3枚目に切り替え
					$(".img2").animate({opacity:0});
					$(".img3").animate({opacity:1},"slow");
					break;
			}

			$("#debug").text(flg);	//デバッグ用（ここは削除します）

			flg++;
			if(flg&gt;3){
				flg=1;	//flg が 3 を越えたら 1 に戻す
			}

		}, 3000);	//setInterval() で 3秒間隔で実行
	});
</script>

処理構造に変更はありません。animate()を使用して、opacityを変更しています。

<p id="debug">;debug</p>;
<div id="slideShow">
	<img src="img1.jpg" class="img1">
	<img src="img2.jpg" class="img2">
	<img src="img3.jpg" class="img3">
</div>

HTMLに変更はありませんが、ここだけ見る人のために記述しておきます。

【ステップ２】CSSの透明度を変えることで実現する

関連記事