Lesson 03 スライドショーで動きのあるサイトに - Webデザイン表現&技法の新・スタンダード・インタラクション編

Webデザイン 表現&技法の 新・スタンダード

Lesson 3

スライドショーで 動きのあるサイトに

	制作・文			河原 覚（株式会社アークフィリア）
＞	To Use			JavaScript
＞	Browser			IE 6over | Firefox 3over | Safari 5over

多くの写真を見せたい場合は、スライドショー形式を利用すると非常に効果的だ。ここでは自動で画像が切り替わるスライドショーを作ってみる。ま た、一時停止や前後に進むためのボタンも用意してみよう。

スライドのHTMLは、headでjQueryとスライドショー用JavaScriptの読み込みを行い【1-1】、id="Slides"がスライド本体、id="Panel"がタイトル表示と、スライドショーのコントローラーを含んだパネルとなるようにコーディングする【1-2】【1-3】。


【1-1】head内のscript読み込み


【1-2】
li）、スライドタイトル（p#SlideTitle）、操作ボタン群（ul#Controller）" src="attach/images/201103/Webcre/interaction/lesson3/1-3.jpg" />
【1-3】

【1-2】【1-3】スライド本体（ol#Slideshow > li）、スライドタイトル（p#SlideTitle）、操作ボタン群（ul#Controller）

slideshow.jsの外部ファイルにスライドショーのJavaScriptを実装していこう。まずは変数を宣言し【2-1】、スライドショーとしての初期状態を作っておく。あらかじめスライドをいったん非表示にしておき、次にjQueryオブジェクトを最初の1枚に絞り込む。絞り込んだ1枚目のスライドに、現在表示されている写真を示すためにcurrentクラスを付与し、さらにその1枚目のみ表示させる【2-2】。次にタイトルを表示する。あらかじめスライドの中から、前段で設定したcurrentクラスのついたスライドを選択し、そのスライドが持つimg要素のalt属性を取得し、テキストとして設定する【2-3】。


【2-1】変数宣言。上からスライドの表示時間、切り替えエフェクトに掛ける時間、スライドショー全体のjQueryオブジェクト、すべてのスライドのjQueryオブジェクト、スライドのタイトル表示部のjQueryオブジェクト、自動再生するかどうかのフラグ、再生時のタイムアウトid


【2-2】スライドの初期状態設定。全体を非表示にしてから、最初の写真だけ再表示している


【2-3】スライドのタイトル設定。currentクラスのついたスライド内のimg要素からalt属性を取得して設定する

メインとなる画像を切り替える処理を見ていこう。この処理は自動再生の際に定期的に実行されるほか、前後への移動ボタンをクリックした際にも実行されるので関数化しておく。また、前へ戻るボタン で進行方向を逆にするときに設定する引数としてisBackを用意し、isBackがtrueの時は進行方向を逆にするように作っていく【3-1】（詳細は04 ～05参照）。


【3-1】Jスライド切り替え処理とまとめた関数の全体像

まずは、currentクラスのついた現在表示されているスライドを取得する【4-1】。続いて、次に表示するスライドを取得していく。これは現在表示している兄弟要素の次に出てくる画像となるが、現在表示しているスライドが末尾の場合は最初のスライドを次として扱う。そしてlengthを使って次の要素の数を調べる。兄弟要素の次の要素の数が1ならばそのまま次の要素を、0ならば最初の要素を次のスライドとして取得する。isBackが設定されていた場合は、以上の逆となるようにnext(),first()をそれぞれprev(),last()として次のスライドを設定する【4-2】。


【4-1】現在のスライドを取得


【4-2】$current.next().lengthの値によって、次のスライドを判定する。isBackがtrueの時にはnextとfirstをそれぞれprevとlastとして逆として処理している

続いて、現在のスライドを消して次のスライドを表示する。現在のスライドのcurrentクラスを削除し、フェードアウトを設定。次のスライドにcurrentクラスを設定し、フェードインを設定する。さらに、表示されるタイトルを次のスライド画像のalt要素に差し替える【5-1】。最後に重複実行を防止するためのclearTimeoutを実行しておき、自動再生フラグがオンの際にはsetTimeoutで自分自身を実行し自動再生を行うようにする【5-2】。


【5-1】現在のスライドにフェードアウト、次のスライドにフェードインを設定して、タイトルを差し替える


【5-2】重複実行防止のためにclearTimeoutを実行した上で、自動再生の場合だけtimeoutを再度設定する

表示用の関数ができたら、スライドをコントロールするボタンを設定する。まず、スライドを前後に移動するためのボタンにクリックイベントを設定する。前後どちらのボタンもクリックされた際に呼び出す関数はslideChangeだが、前へ戻るボタンのみ引数にtrueを渡し、スライドの進行方向を逆にする【6-1】 。続けてスライドショーの一時停止、再生ボタンを設定。まず自 分自身の現在のクラスがstopかplayかによって処理を分ける。stopクラスの場合はスライドショーを一時停止させるため、clearTimeoutを実行、自動再生フラグをオフにする。playクラスの場合は逆に自動再生フラグをオンにして、setTimeoutでslideChange関数を呼び出すように設定する。その後、stopクラスとplayクラスを入れ替える【6-2】【6-3】。最後にsetTimeoutでスライド切り替え処理を呼び、自動再生が実行されるようにしたら完成だ


【6-1】クリックされた際にslideChange を実行するようにする。前へ戻る場合は引数としてtrueを設定する


【6-2】再生・一時停止ボタン。現在のクラスによって処理を振り分けている


【6-3】クリックする度にstopクラスとplayクラスを入れ替える


【6-4】スライドショーの初回実行