必要な設定は「画像パス」と「時間間隔」.

時間という要素をプログラムに持ち込むため,ソースの理解はかなり難しいものとなっている.
setTimeout関数(またはsetInterval関数)を使用することで,一定時間後に何々を実行する,ということが可能になる.ソースではchangeImage関数を0.5秒間隔で実行し,そのたびに画像を変化させるといった処理を行っている.

また,この画像を変化させはじめるタイミングも問題になる.この場合,「ページが読み込まれたら」というタイミングになっているが,これはwindow.onloadに実行したい処理を書くことで実現している.

尚,ここでは4枚の画像を順番に表示しているが,1→2→3→4と表示したら,1に戻すという処理(++frame % myImages.length)を行っている.1→2→3→4→1→2→3→4→1→...とエンドレスで画像が切り替え表示される.

画像提供 : PhotoBox YAS
戻る ]