スライドショー作成の考え方

スライドショーを構成する要素

• メインに表示される画像
• ボタン群(liで表現)
  • 再生ボタン
  • 前へボタン
  • 次へボタン
• サムネイルの画像一覧(liで表現)

Step1 必要なパーツをHTMLとCSSで表現

• メインに表示される画像を任意で一枚とりあえず配置
• ボタン群をliタグで表現
  • ボタンにuser-select: none;すると連打してもテキストが選択されないようになる
• サムネイルの画像一覧をliタグで表現
  • 画像の縦横比を考慮する必要があるが、widthのみ設定し、heightを省略すれば縦横比を保ってくれる
  • 選択されている画像と選択されていない画像が判別できるようにCSSを適用する(.current)

Step2 上記のパーツをjavascriptで表現

• 画像ファイル名を配列で保持
  • メインエリアに配列のインデックスで画像を指定して表示
  • サムネイル一覧エリアに配列ループで表示
• currentクラス
  • currentクラスを付与する時には配列のインデックスを指定する時に$array[currentIndex]とする

Step3 javascriptで動的な表現を実装

サムネイルをクリックしたらメインに反映される

• サムネイルの画像全てにクリックイベントを設置し、メインエリアにそのクリックされた画像パスを格納する
• currentクラスの付け替え
  • 一旦currentクラスを削除する
  • currentクラスを付与するための現在選択されている配列のインデックス番号を更新する
  • 上記のノードにcurrentクラスを付与する

次へボタン

• クリックイベントを設定し、現在選択されている配列のインデックス番号の1つ上の値に上記と同様の処理を走らせる。
• サムネイルの最後まで表示させたら最初に戻るようにif文を記述

前へボタン

• 次へボタンの処理を流用

再生ボタン

• 次へボタンの処理をsetTimeout()で一定リズムで走らせる
  • HTMLElement​.click()により、あたかも手動でクリックしたかのように動作させることができる
• 停止ボタンを動作させる(フラグ変数isPlayingを用意,初期値はfalse)
  • falseの場合
    • 再生の処理を走らせ、テキストをplayからpauseに変更
    • フラグを切り替える(isPlaying = !isPlaying;)
  • trueの場合
    • clearTimeout()にタイマーIDをセットし、処理を止める
    • 再生の処理を走らせ、テキストをpauseからplayに変更
    • フラグを切り替える(isPlaying = !isPlaying;)