ホームページを作ってみたい！ - 動きをもっと！JavaScript。 - 3 スライドショー

donguri

2021年1月11日 06:30

名前を付けて何かする、何かができることをやりましたが、ホームページで実際よく使われているものを作ってみましょう。

トップページなどで見かけるスライドショーを作ってみましょう！時間で画像が切り替わるスライドショーです。参考サイトです。

今回はJSBinではできないので自分のパソコン環境で作ります。テキストエディタを使ってやります。CotEditor(Mac専用)を使ってやっていきます。ブラウザで表示させ、編集後は更新して確認しながらやっていきます。

用意するものは画像を2つのみです。この画像をHTMLファイルと同じ階層に置いてやります。階層ということばがわかりにくい場合は同じフォルダに入れて実行していきましょう。以下のようになると思います。

まずHTMLを書いていきます。画像を配置してホームページ上で表示されるようになります。ここでJavaScriptで認識できるように

id="slidpicture"

としてやります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>

	<img src="cosmos.jpeg" id="slidpicture" width="400" height="300">	

	<script>
　　　　　　　　　　// JavaScriptを書いていきます。
	</script>

</body>
</html>

そしてJavaScriptですが、

    const slideimg = ["sakura.jpeg","cosmos.jpeg"];
    
	let num = 0;
	
	function timer(){
	if (num === 1){
		num = 0;
		} 
		else {
		num ++;
		}
		document.getElementById("slidpicture").src = slideimg[num];
	}
	
	setInterval(timer, 2000);

となります。上から順番に見ていきます。

const slideimg = ["sakura.jpeg","cosmos.jpeg"];

画像をまとめて管理します。配列の中に写真のデータを入れています。

配列というのは"[ ]"で囲んだ中に","で区切ってデータを格納できるものです。文字、数字が入ります。今回は画像の名前を入れていて文字列扱いです。配列には最初から順番が付けられています、最初のデータには"0"、次が"1"という感じで2,3,4,5,・・データの数だけ続いていきます。

let num = 0;

これでデータの順番を指定してやります。今の番号が"0"です。

次が実際に画像の表示を変えていく命令となります。"関数"と呼ばれる命令のかたまりです。基本の形は

function 関数名(引数名){

実行コード

}

であり、一度宣言すると名前だけで使い回しができるようになります。以下のものは"timer"という名前がついています。

function timer(){
　if (num === 1){
　num = 0;
　}
　else {
　num ++;
　}
document.getElementById("slidpicture").src = slideimg[num];
}

関数の中身ですが、まず

if (num === 1){
　num = 0;
　} 
　else {
　num ++;
　}

"if"を使った条件分岐です。先に宣言している"num"を基準に考えます。

"num ===1"であればというのは変数numが"1"と同じ数字であるという意味です。"==="が同じであるという意味を表しています。この条件が成り立つ時は変数numを"0"にします。

"else"というのは上の条件出ない場合、変数numが"1"でない場合は変数numを"++"する。"++"は加算を意味するので"0"の場合は"1"となります。

続けてこの関数の命令を言葉で書いてみると、まず最初は"num"は"0"となっている場合は上の条件では"num===1"ではないので"else"が実行されます。そしてnumは"1"となります。次に実行された場合は"num===1"となるので、numは"0"となります。この繰り返しが行われます。

それでは次の命令を見てみましょう。

document.getElementById("slidpicture").src = slideimg[num];

この命令でスライドの画像を変えていきます。

document.getElementById("slidpicture").src

で、 id="slidpicture"を目じるしに、

<img src="cosmos.jpeg" id="slidpicture" width="400" height="300">

のタグを取得してsrc="cosmos.jpeg"のデータを入れ替えます。入れ替えるデータは

slideimg[num];

であり"num"が示す番号で配列より画像の名前を取得して

src="cosmos.jpeg"

の名前を変更することで表示される画像が変わります。

以上が関数の中身です。

そして、定期的にこの関数を実行するための命令が

setInterval(timer, 2000);

の命令となります。"setInterval"については以下を参考に。

この命令で定期的に2000ms(2秒)に一回実行されるようになります。

これで2秒に一回写真が変わるようになります。写真を増やす場合は"num === 1)"の条件を変えてやればうまくいきます。(配列の最後の番号にしてやれば良いです)

この記事が気に入ったらサポートをしてみませんか？