jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法

2011/05/25 TAGS :Gallery, jQuery

サイトのトップページなどでキ―ビジュアルにあたる部分を、複数枚ある画像を単純なフェードで切り替えるような動作を組み込むことはよくあること。

そんなちょっとした画像の切り替えが必要な際に使える、凝った動きも無く、画像がひたすらクロスフェードし続けるシンプル画像ビューアーのサンプルを作ったので紹介してみます。

まずは動作のサンプルから。

jQuery CROSS FADE IMAGE VIEWER【SAMPLE】

サンプルでは4枚の画像を切り替えています。
自動で再生され、4枚の画像が永遠にループし続けます。

全体構成についてHTMLから。

◆HTML
<div id="viewer">
<img src="img/photo01.jpg" width="400" height="300" alt="" />
<img src="img/photo02.jpg" width="400" height="300" alt="" />
<img src="img/photo03.jpg" width="400" height="300" alt="" />
<img src="img/photo04.jpg" width="400" height="300" alt="" />
</div><!--/#viewer-->

大枠をID「#viewer」（ここの名前は任意）で囲って、その中に＜img＞タグで画像をひたすら入れておきます。
4枚以上の画像を使用する際は単純に＜img＞ソースを追加します。

HTMLソースの一番上に書かれた＜img＞タグがページロード時に最前面に表示され、その後、順々に下にさがって表示されます。

そしてこのHTMLソースに対してのCSSは以下の様に。

◆CSS
#viewer {
	margin: 0 auto;
	width: 400px;
	height: 300px;
	text-align: left;
	overflow: hidden;
	position: relative;
}

#viewer img {
	top: 0;
	left: 0;
	position: absolute;
}

大枠のIDに対して、中に入る＜img＞要素が「position:absolute;」になっている必要があります。

そして実際に動作を実行させるスクリプトは以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var setImg = '#viewer';
	var fadeSpeed = 1500;
	var switchDelay = 5000;

	$(setImg).children('img').css({opacity:'0'});
	$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

	setInterval(function(){
		$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
	},switchDelay);
});
</script>

変数「setImg」は画像の周りを囲うIDの名前となっているので、サイト構成によってここの名前を変更することも可能です。
（ここは「.viewer」のようなクラス指定でも可）

「fadeSpeed」はその名の通りフェードする際のスピード、「switchDelay」は切り替わるタイミング時間になり、
ここの値を変えることでそれぞれのスピード調整が可能です。

凝った演出などはありませんが、シンプルに画像を切り替えるだけの動作が必要な際に手軽に使えると思います。

クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

【2013/01/09】ページ内での複数設置および画像にリンク設置などを可能とした改訂版スクリプトを作成しました。詳細はこちらから

【2013/12/17】レスポンシブ対応したパターンを作成しました。（ページ内での複数設置および画像にリンク設置なども可能）詳細はこちらから