JavaScript

【ドットインストール】JavaScriptでスライドショーを作ろうを受講した感想

JavaScriptでスライドショーを作ろうの受講が完了しました。

学習内容

以下の仕様のスライドショーを全20回の動画を通して作り上げることになります。

タイピングゲームの仕様
  • メインの画像を大きく表示
  • Playボタンを押すと0からの画像を順番に表示し、Playの文字をPauseに変更する
  • Pauseボタンを押すと順番の表示を止める
  • 「<」を押すとと1つ前の画像を表示
  • 「>」を押すとと1つ次の画像を表示
  • 下部の画像をクリックするとその画像をメインに表示

画面のイメージはこんな感じです。

今回も最初の完成サイトのWebページを見てから、まずは自分で実装してみました。



つまづいた点

以下つまいずいたポイントや、動画のほうが良いなと思った点です。

setTimeoutとsetInterval

スライドショーする画像(僕の場合はdiv要素)をするためにタイマー的な感じでSleepさせながらループさせたかったんですが、それにはsetTimeoutかsetIntervalをする必要があります。

ってやれたらどれだけ簡単か・・・。

結果的にはsetIntervalで定期的に「>」ボタンを押した時の処理を実行することに落ち着きました。

そして、他の他の画像やボタンが押されたらスライドショーを止めるという使用で実装してフィニッシュです。



感想

setTimeoutとsetIntervalにちょっととまどいましたが、これぐらいだったらまぁ作れるレベルにはなったかなと思います。

ですので、一旦「JavaScriptでミニアプリを作ろう」シリーズを作ろうをやるのはやめてjQueryの学習に移行していきます。

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す