1. HOME
  2. javascript
  3. スライドショーを作ろう(fadeIn編)

スライドショーを作ろう(fadeIn編)

この記事では、fadeinタイプのスライドショーの作成例を見ていきます。

作れるのは、このようなスライドショーです。
3秒ごとにスライドが切り替わる仕様になっています。

スライドショーをやるにあたって必要なもの

簡単な仕組みとしては、

  1. 同じ場所に各パーツを重ねる。
  2. 1枚目が一番上になるようにする。
  3. 次のスライドを探す。もしそのスライドが一番最後までいったら一番最初に戻すようにする。
  4. setIntervalを使って、一定時間で回るようにする。

スライドショーをやるにあたって必要な知識

  • setIntervalとsetTimeoutの違い。
  • setTimeout→指定時間経過後、一度だけ関数を実行する。 指定した時間経過後に処理を実行する
  • setInterval→各実行の間は指定した間隔で、定期的に関数を実行する。指定した時間ごとに処理を実行する
  • lengthメソッドの使い方

サンプルコード

html
css

Java Script

他のカテゴリーの記事をみる