jQuery:一定時間でバナーを切り替える

前回まで作成したショーケースは、マウス操作によってバナーを切り替えました。しかし
ショーケースには一定時間で自動的に切り替わるタイプのものがあるので、今回はそれを
紹介します。

sample : 一定時間でバナーを切り替える
http://www.designdrill.jp/jquery/04/05_setInterval.html
※3秒おきにバナーが切り替わります。

 
ベースとしたサンプルは分割型のショーケースです。htmlの修正はボタンを削除しただけで、
cssは変更ありません。jQueryも2カ所しか修正点がありません。
 
まず1つ目はclickのイベントハンドラを廃止し、その処理を関数pageChangeFunc
としてまとめました。あと1つは以下の1行です。これはjQueryのものではなく
javaScriptが標準で持っているsetIntervalを利用しています。

photoTimer = setInterval(pageChangeFunc,3000);

これは2つの引数を設定します。1つ目は一定時間で実行したい関数名、今回はバナーを切り替える
pageChangeFuncを実行します(実行したい関数名をクォートで囲む必要はありません)。
2つ目の引数は間隔をミリ秒で指定します。今回は3000としているので3秒(3,000ミリ秒)で
切り替わることになります。
 
実用的なショーケースを作成するには、リンクの設定をしなければなりませんが
それらはスクールでの講座で説明する予定です。ブログのネタに窮したら簡単に説明する記事を
書くかもしれません。
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


二 × 3 =


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>