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;