JavaScriptで画像を自動で切り替える/自動的に停止させる

スポンサーリンク
JavaScript
スポンサーリンク

切り替えたい画像の<img>タグの直下にJavaScriptのコードを追記することで、複数の画像を自動的に切り替えることができます。

スポンサーリンク

永遠リピートさせたい場合

1.png、2.png、3.pngという三つの画像を何度も繰り返して表示させるソースコードは以下の通りです。

まず、表示させたい画像をArrayの中に入れておきます。silideshow_timer()で生成された数字(num)をArrayのインデックスとして渡すことで、画像を切り替えています。num=2になったときは、num=0を代入することで始めから再生されるという仕組みです。setTimeoutは指定された時間間隔でfunctionを呼び出すメソッドです。ここでは200ミリ秒ごとにslideshow_timer()を呼び出しています。

1回目のイテレーションで停止させたい場合

永遠にリピートさせる方法のコードを少し変更すると、1回目のイテレーションで自動停止させることができます。

変更したのはこの部分です。

このコードを実行してみると、一見、3.pngが表示された時点で、切り替えが終了したように見えます。しかし、実際は、3.pngの画像を200ミリ秒ごとに切り替え続けています。

補足:動画を挿入する方法

PowerPointなどで動画を作成して、埋め込むこともできます。動画を埋め込む場合はhtmlの<video>タグを使用してください。autoplayにすることで、自動再生することができます。

下のコードのようにloopを付け加えると繰り返し再生されます。

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