クロスフェードの画像スライダーに切り替えボタンをつけてみた

クロスフェードの画像スライダーに切り替えボタンをつけてみた

こんにちは。ガス欠と故障の見分けがつかないデザイナーの稲垣です。
バイク屋まで3km近く押して持ち込みましたが、大変恥ずかしい思いをしました。

さて、今回は前回の「jQueryプラグインを使わずに画像をフェードで切り替える方法」の続きとして、切り替えボタンの設置をしてみようと思います。

img140711_1

 目次

デモ

サンプルコード

スライダーの設計を考える

おわり

デモ

完成したものはこのような動きになります。

サンプルコード

前回の記事を見返した時に分かりづらく感じたので、今回はまず最終的なコードを先に書いておこうと思います。

html

大枠を #slider で囲み、その中に
div#back(戻るボタン)
ul#photo(切り替わる画像)
div#next(次へボタン)
の3つが入る構成になります。クロスフェートの処理は<li>ごと切り替えるので画像にリンクをつけることも可能です。

css

前回同様、画像を内包している<li>を position:absolute; で重ねます。
それ以外のスライダーやボタンの位置などはレイアウトに合わせて適宜調整してくださって構いません。

JavaScript

それぞれのコードがどんな役割を持っているか簡単にコメントをつけてみました。
次項からこれをもう少し掘り下げていってみようと思います。

スライダーの設計を考える

先述のコードを上から順に追って行こうと思います。

リストタグにidの設定

今回のスライダーはまず変数 countを用意し、全ての<li>にidを付加しました。
id名は0からカウントされるので画像のファイル名とは数が一つずれます。

img140711_2

画像フェードの関数

countの数値を基に指定の<li>を一番上にフェードインさせるという動きをphotoFade()関数にまとめます。

img140711_3

あとはこのcountの数値をボタンで変更できるようにしましょう。

ボタンをクリックした時の動き

countの値を増減させる関数をそれぞれ用意します。
画像総数を超える値になると0に、0以下になる場合は画像総数を代入します。
今回の場合、変数「qua」に入っている画像総数は4になりますが、idは0からカウントしているので、countの 最大値は3になります。
そのため、画像総数を qua-1 としました。

setInterval()関数を使い、 countUp() と photoFade() を実行します。
countUp()を実行することで count の値が一つ加算され、photoFade()で次のidの<li>を表示させることができます。これで前回と同じように数秒毎に自動でクロスフェードしていくスライダーになりました。

あとは同じように、ボタンが押された際にもcountUp() と photoFade()を実行させるようにしましょう。
ただし、戻るボタンの場合は一つ前のidの<li>を表示させたいので、countDowm()関数を使用します。

また、自動でフェードしていく動きとボタン操作による動きとがダブってしまうので、ボタンのイベント関数でclearIntervalを含めたtimerStart()を実行し、ボタンがクリックされた時には自動フェードの処理を一旦リセットするようにしました。

読み込み時の初めのフェードインと、自動フェードの関数を実行したら終了です!

おわり

書いてみると思っていたより長くてくどい説明になってしまいました。
もっと分かりやすく簡潔に伝えられるようになりたいです。

今回のスライダーを作成するにあたり、「最初にidを振るのがスマートじゃない」と、某世紀末コーダーさんに言われましたが自分には他の作り方が思い浮かびませんでした。

同じ動きのものを作るにも人によって書き方が変わるので、他の人のコードを見るのは楽しいし勉強になりますね。

たくさんある方法のうちの一つという形で紹介させていただきました。

同じカテゴリー(WEB制作・デザイン)の記事