【JavaScript】画面をロードするごとに表示する画像を切り替えよう
最近仕事が忙しく今日もギリギリの更新になってしまいました。
これから寒くなっていくので体調には気をつけていきましょう！
今日は画面をロードするごとに画像が切り替わる仕組みをお伝えします。
まず画像を3枚用意してください。種類はなんでもOKです。
画像名はimg01.jpg、img02.jpg、img03.jpgとします。
次にindex.htmlを作成します。
index.html (完成版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><img src="img01.jpg" id = "img" alt="画像"></div>
<script>
window.onload = function(){
let num = Math.floor(Math.random()* 10);
if(num >= 3){
num = 0
}
const target = document.getElementById("img");
let img = `img0${num + 1 }.jpg`;
console.log(img)
target.setAttribute('src',img)
}
</script>
</body>
</html>
下記の通り初期値はimg01.jpgを初期値とします。
<div><img src="img01.jpg" id = "img" alt="画像"></div>
続いてJavaScriptを書いていきます。
<script>
window.onload = function(){
let num = Math.floor(Math.random()* 10);
if(num >= 3){
num = 0
}
const target = document.getElementById("img");
let img = `img0${num + 1 }.jpg`;
console.log(img)
target.setAttribute('src',img)
}
</script>
ここでは画面を読み込んだ際に処理を実行したいのでwindow.onloadを用いて処理をします。
次に変数numに乱数を生成するMath.random()メソッドを使い0〜9の数字を生成します。小数点以下はMath.floorメソッドで切り捨てます(^o^)
さてここで問題なので数字が3以上になった場合です。画像が3枚しかないので3以上の場合だと画像が足りません。
if(num >= 3){
num = 0
}
そこでif文を用いて乱数が3以上の場合は数字を0にしています。これで３以上になることはありません。
const target = document.getElementById("img");
let img = `img0${num + 1 }.jpg`;
console.log(img)
target.setAttribute('src',img)
そして変数targetにimgタグの要素を取得します。
次に変数imgに乱数をテンプレートリテラルを用いてファイル名の形に整えます。
ここで重要なのがnumに1を足して0が出た場合は1、1の場合は2、2の場合は3にして変数imgに格納します。
そして変数targetに取得したimg要素のsrc属性にimgタグを引数にして渡します。
これで完成です。画面をみるとロードするたびに画面が変わっているはずです。
是非試してみてくださいね。
ファイル管理にお困りのリモートワーカーへ【Web-luck（ウェブ・ラック）】 
