このページの本文へ

jQuery+CSSによるカルーセルパネルの作り方

2009年12月11日 11時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

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

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

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

 タイマーを設定するには、サンプル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」(共著、毎日コミュニケーションズ刊)がある。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング