BLOG

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

2011年10月20日

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;

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。