JavaScriptのsetInterval()でアニメーションの初歩

JavaScriptのsetInterval()でアニメーション

またまたsetInterval()ネタです。

今回は、画像の座標を変更することで移動させます。更にボタンでON/OFFします。

先日書いた「JavaScriptのsetInterval()を使い、一定間隔で処理を繰り返す。」では、一定間隔で変数に+1しながら100までカウントしました。

今日は、同じように一定間隔で座標に+1しながら画像を移動させてみようと思います。

 

まずはサンプル

ここはデバッグ用です。 変数xの値を表示します。

WEB-LABO

x座標が、ある値を超えたらゼロに戻すと、ぐるぐるループさせることができますが、今回はシンプルにするために行っておりません。

 

HTML

まずはHTMLです。

最初の段落(p)は、変数xの確認用です。実際に公開する場合は削除します。2つ目の段落(p)が画像です。 img要素には、idで名前を付けています。3つめの段落(p)は、ボタンです。onclickイベントで関数を呼び出しています。

※画像のファイル名は、用意されたものに変更ください。

 

CSS

CSSでは、img要素に「position: relative;」を設定します。動的に座標を移動させるには、「position: absolute;」か「position: relative;」を指定します。

 

JavaScript

moveImg()関数が「スタート」ボタンを押された時に実行する関数です。stopImg()関数は、「ストップ」ボタンを押された時に実行する関数です。

今回は、フラグ変数(flg)を使ってmoveImg()関数が重複して起動しないようにしています。

 

HTMLにまとめると

 

まとめ

タイマーで変化させる変数の値を座標に使用すれば、位置を移動させることができます。
ボックスの移動

タイマーで変化させる変数の値で画像を切り替えれば、スライドショーを作ることができます。
スライドショーの考え方

 

PR

関連記事