Webデザイン |
Lesson 3 | スライドショーで 動きのあるサイトに |
制作・文 | 河原 覚(株式会社アークフィリア) | |||
> | To Use | JavaScript | ||
> | Browser | IE 6over | Firefox 3over | Safari 5over |
多くの写真を見せたい場合は、スライドショー形式を利用すると非常に効果的だ。ここでは自動で画像が切り替わるスライドショーを作ってみる。ま た、一時停止や前後に進むためのボタンも用意してみよう。 |
01
【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)
02
【2-1】変数宣言。上からスライドの表示時間、切り替えエフェクトに掛ける時間、スライドショー全体のjQueryオブジェクト、すべてのスライドのjQueryオブジェクト、スライドのタイトル表示部のjQueryオブジェクト、自動再生するかどうかのフラグ、再生時のタイムアウトid
【2-2】スライドの初期状態設定。全体を非表示にしてから、最初の写真だけ再表示している
【2-3】スライドのタイトル設定。currentクラスのついたスライド内のimg要素からalt属性を取得して設定する
03
【3-1】Jスライド切り替え処理とまとめた関数の全体像
04
【4-1】現在のスライドを取得
【4-2】$current.next().lengthの値によって、次のスライドを判定する。isBackがtrueの時にはnextとfirstをそれぞれprevとlastとして逆として処理している
05
【5-1】現在のスライドにフェードアウト、次のスライドにフェードインを設定して、タイトルを差し替える
【5-2】重複実行防止のためにclearTimeoutを実行した上で、自動再生の場合だけtimeoutを再度設定する
06
【6-1】クリックされた際にslideChange を実行するようにする。前へ戻る場合は引数としてtrueを設定する
【6-2】再生・一時停止ボタン。現在のクラスによって処理を振り分けている
【6-3】クリックする度にstopクラスとplayクラスを入れ替える
【6-4】スライドショーの初回実行