Web制作の現場で使えるjQuery　UIデザイン入門 ― 第23回

jQuery＋CSSによるカルーセルパネルの作り方 (3/3)

【クライアントのわがままに応える！】

カルーセルパネルを自動的にスライドさせたい！

　「もっと目立たせたいので、勝手にスライドするようにしてほしい」。タイマーを仕込めば、ユーザーがクリックしなくても一定間隔で自動的にスライドするカルーセルパネルを作れます。

　タイマーを設定するには、サンプル01のスクリプトの$(function(){...})内に次のコードを追加します。

▼サンプル02（スクリプト部分）

var timerID = setInterval(function(){
    $("#carouselNext").click()
},5000)

　setInterval()はJavaScriptの命令で、function(){...}内に記述した処理を一定間隔で繰り返し実行します（タイマー処理）。実行する間隔はfunction(){...}の後ろの,(カンマ)に続けてミリ秒で設定します。サンプル02の場合は5000ミリ秒、つまり5秒ごとに処理を実行します。

　setIntervalの前にある「var timerID = 」は、setIntervalのタイマーIDを「timerID」という名前の変数（値を一時的に入れておく場所）に保存するための記述です。「タイマーID」というID情報を持っており、タイマーIDはタイマーを停止する際に使用します。

　$("#carouselNext").click()は、「#carouselNextに設定されているclickイベントを実行する」という意味です。これで5秒ごとに「進む」ボタンと同じ処理が繰り返し実行されます。

　ただしこのままだと、サイトを訪れたユーザーがカルーセルを操作できないため、ボタンがクリックされたときは以下のようにしてタイマー処理を停止させます。

▼サンプル02（スクリプト部分）

$("#carouselPrev img,#carouselNext img").click(function(){
    clearInterval(timerID);
})

　#carouselPrevや#carouselNextにはすでにclickイベントを設定していますので、タイマーの停止はその内側のimg要素に対して設定します。clearInterval(timerID);で、先ほど変数に保存したsetIntervalのID情報を元にタイマー処理を停止できます。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。