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

一年以上前の記事になりますが、「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法」と題して、画像がクロスフェードするだけのシンプルな画像ビューアーを実装するスクリプトを紹介しましたが、紹介後、１ページ内に複数設置やリンクを張ったり、キャプション（テキスト）を追加するパターンなどなど、数多くの様々なカスタマイズに関するご要望が届きました。

もともと単純に画像を切り替えるだけの想定でシンプルに作成していたものだったので、その様なパターンを実装するには何かと面倒なスクリプトカスタマイズが必要だったので、もっと応用が利く形での画像ビューアー（コンテンツビューアー）スクリプトを作成してみたので紹介してみます。

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

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

「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】」サンプルを別枠で表示

シンプルな形で5枚の画像を自動再生＆無限ループし続けます。

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

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

前回のクロスフェードビューアーでは＜img＞タグを使って切り替えていましたが、今回は＜ul＞リストを使って構成しているので切り替える一つひとつの要素は＜li＞リスト要素になっています。

画像を配置するだけでなくリンクを張ったり、テキストなどのキャプションを配置したりするには＜li＞の中で個別に自由にレイアウトすることが可能になっています。

そしてこのHTMLに対するCSSは以下の様になります。

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

.viewer ul {
	width: 400px;
	height: 300px;
	text-align: left;
	overflow: hidden;
	position: relative;
}

.viewer ul li {
	top: 0;
	left: 0;
	width: 400px;
	height: 300px;
	display: none;
	position: absolute;
}

＜li＞タグは「position:absolute;」になっている必要がありますが、その中に入る要素についてはそれぞれ任意の指定で問題ありません。

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

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

	$setElm.each(function(){
		var targetObj = $(this);
		var findUl = targetObj.find('ul');
		var findLi = targetObj.find('li');
		var findLiFirst = targetObj.find('li:first');

		findLi.css({display:'block',opacity:'0',zIndex:'99'});
		findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);

		setInterval(function(){
			findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
		},switchDelay);
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

これらの設定値を変更することでもろもろ調整が可能になっています。

対象のベースの要素がIDでもクラスでも可能になっているので、1ページ内に複数設置の際にはクラスを使用することで、複数設置することが可能になっています。

1ページ内に2つのクロスフェードビューアーを設置して、それぞれにキャプションを付けた形でのサンプルは以下の様になります。

複数設置＆キャプション付きサンプルを別枠で表示

凝った演出などはありませんが、シンプルに画像などを切り替えるだけの動作が必要な際に手軽に使えると思います。
クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。

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