会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【JavaScript】ページを開くと同時に自動で画像を自動で無限ループで切り替える方法|簡易アニメーション作成・無限ループ

JavaScript(ジャバスクリプト)
この記事は約3分で読めます。

ページを開くと同時に自動で画像を自動で無限ループで切り替える

▼デモページはこちら
https://css.eguweb.tech/p037/

前回は、JavaScriptを使って「クリックして画像を切り替える」というお話をしましたが、今回はページを開いたと同時に画像が動くという仕掛けを作ります。

window.onloadで関数を読み込む

window.onloadを使うことで、ページを開いたタイミングで関数が自動実行されます。

<script type="text/javascript">
window.onload = function(){

}

setInterval

setInterval を使うことで、一定時間ごとに特定の処理を繰り返すことができます。

この場合は、0.1秒ごとに changeImage() を繰り返し実行しています。

<script type="text/javascript">
window.onload = function(){
 setInterval("changeImage()", 100);
}
let pics_src = new Array("http://css.eguweb.net/wp-content/uploads/maxresdefault.png","http://css.eguweb.net/wp-content/uploads/figure_aruku.png","http://css.eguweb.net/wp-content/uploads/figure_hashiru.png");
let num = 0;

function changeImage(){
 if (num == 2) {
  num = 0;
 }
 else {
  num ++;
 }
 document.getElementById("img4").src=pics_src[num];
 const output = num;
 document.getElementById("output-message").innerHTML = output;
}
</script>

HTML部分

<div>▼実行結果(自動で再生)
</div>
 <div>
<img id="img4" class="img-def" onclick="changeImage()" src="https://css.eguweb.net/wp-content/uploads/maxresdefault.png">
</div>
<p id="output-message">値</p>

▼デモページはこちら
https://css.eguweb.tech/p037/

まとめ

これで、ページが開いたときに関数が自動実行されて画像が動き出します!

ご参考ください(^ ^)

タイトルとURLをコピーしました