JavaScriptテックラボ

jQueryを使って画像を切り替えるチュートリアル



jQueryとsetIntervalを使った簡単な画像切替スクリプトを作成してみます。
まずはスタイルシートの設定で、表示領域(画像)のサイズを設定します。


IDがmain-visualに格納されたオブジェクトを切り替え対象にするので、下記のようにmain-visualというIDのボックスを用意し、その中に画像を配置します。
アンカーはつけても付けなくても大丈夫です。

<a href="a.html"><img src="p1.jpg" /></a> <a href="b.html"><img src="p2.jpg" /></a> <a href="c.html"><img src="p3.jpg" /></a> <a href="d.html"><img src="p4.jpg" /></a>

最後にJavaScriptを記述します。JavaScriptとStyle設定はHEAD要素に書くといいでしょう。
jQueryを最初に読み込み、ドキュメントが構築された後に実行するように$(function(){})の中にコードを記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function(){

	// 切り替え秒数の設定
	var sec		= 4000;

	// 画像用配列の準備
	var images = new Array;

	// アンカーも含んだ画像オブジェクトを配列に登録
	$('#main-visual').children().each(function(){
		images[images.length]	= $(this);
	});

	// 配列用のインデックスの初期化、最初の画像を表示、
	var index = 0;
	$('#main-visual').html(images[index].clone(true));

	// 画像切り替え処理
	setInterval(function(){
		index++;
		// 配列用インデックスの初期化
		if (index >= images.length) index = 0;

		// 古い画像をフェードアウトし、削除
		$('#main-visual > a').fadeOut('slow', function(){
			$(this).remove();
		});
		// 新しい画像をフェードインで表示
		$('#main-visual').prepend(images[index].clone(true).fadeIn('slow'));
	}, sec);
});
</script>

コメントを読めば大体の内容がわかる簡単なスクリプトです。

ループせずに、最後の画像で止めたい場合は、配列用インデックスの初期化部分を下記のように書き換えます。

// インデックスの初期化
if (index >= images.length) return false;

関連記事