画像を自動的に見せてくれるシンプルなスライドショーがJQueryを使うことで簡単にできてしまいます。
ソースコードはこちらからダウンロードできるようになっています。
使い方は、まずJQueryを読み込みます。
[HTML][/HTML]
JQueryを使うときは、以前紹介した「JQueryなどGoogleが提供してくれているサイトのタグを簡単に取得する方法」を使うと簡単ですね。
次に、JSを設定します。
[JavaScript]
[/JavaScript]
setInterval の 5000 という数字を変えることで、ひとつの画像が表示している時間を調整できます。
また、 .animate の 1000 という数字を変えることで、次の画像に変わるまでの時間を調整できます。これを調整することで滑らかなスライドが作れます。
次が、CSSの設定。
[CSS]
[/CSS]
最後に、表示させたい画像を並べます。
[HTML]
[/HTML]
最初に表示させたい画像には class=”active” を設定します。
これだけでシンプルなスライドショーができます。