キャプションつきのギャラリーを作りたいときが多々あります。

・指定した時間で、自動的に画像やテキストが切り替わる
・サムネイルをクリックしても切り替わる
・切り替わるエフェクトはクロスフェード

JQueryを使用して、この全てを満たすJavascriptを作ってみました。

イメージとしては以下のようなものです。

【HTMLはこちら】

<!-- images-->
<div class="g-inner clfix">
	<div id="view">
		<p><img src="images/image1.gif" alt="" width="240" height="150"></p>
		<p><img src="images/image2.gif" alt="" width="240" height="150"></p>
		<p><img src="images/image3.gif" alt="" width="240" height="150"></p>
	</div>
	<ul id="caption">
		<li>テキスト1</li>
		<li>テキスト2</li>
		<li>テキスト3</li>
	</ul>
	<ul id="thumbBtn">
		<li><img src="images/image1.gif" alt="" width="40" height="25"></li>
		<li><img src="images/image2.gif" alt="" width="40" height="25"></li>
		<li><img src="images/image3.gif" alt="" width="40" height="25"></li>
	</ul>
</div>
<!--// images-->

＜div id=”view”＞内はメインイメージ、
＜ul id=”caption”＞内はキャプション、
＜ul id=”thumbBtn”＞内はサムネイルボタンです。

現在は3つずつありますが、数は変更できます。
ただ、メインイメージ、キャプション、サムネイルの数が合うように指定してください。
メインイメージを一つ増やしたらキャプション、サムネイルも一つずつ追加が必要です。

【head内はこちら】

//JQuery読み込み
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(function (){
	//定義
	var active="active",interval=6000;
	var index=0, timerId=null;
	var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li");

	tabs.each(function(){$(this).removeClass(active);});
	content.hide();
	cap.hide();
	tabs.eq(0).addClass(active);
	content.eq(0).fadeIn("fast");
	cap.eq(0).fadeIn("fast");

	//サムネイルクリック時
	tabs.click(function(){
		if($(this).hasClass("active")) return;
		if(timerId) clearInterval(timerId),timerId=null;
		change(tabs.index(this));
		setTimer();
		return false;
	});

	//タイマーセット
	setTimer();
	function setTimer(){
		timerId=setTimeout(timeProcess,interval);
		return false;
	}

	function timeProcess(){
		change((index+1)%tabs.length);
		timerId=setTimeout(arguments.callee,interval);
	}

	//サムネイルをクリックした時or指定時間がきた時の画像切り替え
	function change(t_index){
		tabs.eq(index).removeClass(active);
		tabs.eq(t_index).addClass(active);
		//fadeout
		setTimeout(function(){
			content.eq(index).stop(true, true).fadeOut(3000),
			cap.eq(index).stop(true, true).hide()
		;}, 300);
		//fadein
		setTimeout(function(){
			index=t_index;
			content.eq(index).fadeIn(3000),
			cap.eq(index).fadeIn(3000)
		;}, 400)
	}
});
</script>

var active="active",interval=6000;

というのは

var active=”選択時に付加するクラス名”,interval=切り替え時間;　を、

var tabs=$("#thumbBtn　> li"), content=$("#view > p"), cap=$("#caption > li");

var tabs=$(“サムネイル”), content=$(“メインイメージ”), cap=$(“キャプション”);

を指定してください。

【cssはこちら】

div.g-inner {
	position:relative;
	width:240px;
	height:200px;
}
#view {
	position: absolute;
	width:240px;
	height:150px;
	top:0;
	left:0;
	overflow:hidden;
}
#view p {
	position: absolute;
	width:240px;
	height:150px;
	top:0;
	left:0;
}
#thumbBtn {
	position:absolute;
	top:160px;
	right:0px;
}
#caption {
	position:absolute;
	top:165px;
	left:0px;
}
#thumbBtn li {
	padding: 0 0 0 2px;
	float:left;
	text-align:right;
	width: 45px;
	cursor:pointer;
}
#thumbBtn li img {
	border: solid 1px #ccc;
}
#thumbBtn li.active {
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}

コンテンツのレイアウト、画像のサイズによってこちらの数値を変えてください。
JSで選択時に付加するクラス名を変更した場合は
#thumbBtn li.active
のところも変更します。
現在選択時には半透明になるようになっています。

以上でギャラリーの出来上がりです。
シンプルなので更新がしやすく、JSもカスタマイズ可能です。

＜動作確認済　ブラウザ＞
windows：firefox3～8、IE6～9、chrome
mac：safari3、chrome、firefox3

今回のサンプルのデータはこちらからダウンロードできます
（ライセンスフリー）