JavaScript: GIFアニメのように、画像を一定間隔で切り替える

JavaScriptでGIFアニメのように、 画像を一定間隔で切り替えるプログラムを作りました。 作った動機はGIFアニメに対する物足りなさです。

まずはGIFアニメの不満点を述べてみます。

  • そもそもGIFアニメに変換するのが面倒
  • 画像を追加したい場合、GIFアニメを作り直さないといけない
  • ループの場合、gifアニメがループし続けるのがうざい
  • 一回きりの場合、もの足りない。（リロードしてもらうのもどうかと)

このようなGIFアニメの不満点を解消するために自作してみました。
下の「スライド スタート」ボタンを押すと、 画像が切り替わります。

  • https://step-learn.com/img/img04/s0126-1.png
  • https://step-learn.com/img/img04/s0126-2.png
  • https://step-learn.com/img/img04/s0126-3.png
  • https://step-learn.com/img/img04/s0126-4.png

JavaScriptで画像を切り替えるプログラム

使い方、（HTML、JavaScript）の順番で説明します。

使い方

HTMLコードは次の通りです。設定箇所は3か所あります。


<div id="image-change" data-time="1000" style="margin-bottom: 2em;">
	<div><img class="so" src="" alt=""></div>
	<div><button style="height: 35px;">スライド スタート</button>
	<span style="margin-left: 10px;"></span></div>
	<ul style="display: none;">
		<li>https://step-learn.com/img/img04/s0126-1.png</li>
		<li>https://step-learn.com/img/img04/s0126-2.png</li>
		<li>https://step-learn.com/img/img04/s0126-3.png</li>
		<li>https://step-learn.com/img/img04/s0126-4.png</li>
	</ul>
</div>

<script type="text/javascript" src="https://sample.com/js/image-change.js"></script>

設定するのは上の赤字の部分です（3か所）。順番に説明します。

1. 画像の表示間隔

表示間隔を変更したい場合は「data-time」属性で設定します。 ミリ秒単位なので「1000」が1秒です。0.5秒間隔にしたい場合は「500」を指定してください。

2. 画像のURL

表示したい画像のURLを li 要素の中に記述します。 表示する順番は上から下の順です。 画像を追加する場合は、li 要素を増やせばいいだけなので簡単に画像の追加・削除ができます。

3. JavaScriptファイルの読み込み

JavaScriptファイル「image-change.js」はこちらから
右クリック、「名前を付けてファイルを保存」を 選択して保存します。

任意の場所に置いて、jsファイルを読み込みます。 URL部分はご自身の環境に合わせて書き換えてください。
ファイルを読み込むタイミングは、 header タグ内でも、body タグ内でもどこでも構いません。

JavaScriptコード


// gifアニメのように、画像を一定間隔で切り替えるプログラム

let arr_img = [];
let count_img = 0;
let timer = 0;

window.addEventListener('load', function(){

	let d = document.getElementById("image-change");
	let elems = d.getElementsByTagName("li");
	let img = d.getElementsByTagName("img")[0];  // [0]番目
	let btn = d.getElementsByTagName("button")[0];  // [0]番目
	let spn = d.getElementsByTagName("span")[0];  // [0]番目

	let interval = d.dataset.time;

	// URLを配列に格納
	for (let i = 0; i < elems.length; i++) {
	  arr_img[i] = elems[i].textContent;
	} 
	img.src = arr_img[0];

	spn.textContent =  (count_img + 1) + "/" + arr_img.length;

	// ボタンのクリックイベント
	btn.addEventListener('click', function(){
		if (count_img == 0){
			btn.disabled = true;
			img.src = arr_img[0];
			spn.textContent =  (count_img + 1) + "/" + arr_img.length;

			clearInterval(timer);
			timer = setInterval(f_change_image, interval);	
		}
	})

});

// 画像変更
function f_change_image(){

	let d = document.getElementById("image-change");
	let img = d.getElementsByTagName("img")[0];  // [0]番目
	let btn = d.getElementsByTagName("button")[0];  // [0]番目
	let spn = d.getElementsByTagName("span")[0];  // [0]番目

	count_img ++;
	if (count_img >= arr_img.length){
		clearInterval(timer);
		count_img = 0;
		btn.disabled = false;

	} else {
		img.src = arr_img[count_img];
		spn.textContent =  (count_img + 1) + "/" + arr_img.length;
	}
}
JavaScript入門