その他　変身５■複数の画像並べて画像変化

●2025/11/11：即時関数で囲んで、グローバル変数を消しました。

■並んだフグがランダムで変身するJavaScriptはこちら→　変身１■膨らむフグ-基本（後ろにサメ）

上記のJavaScriptを改造しました。
ランダムに並んだ複数画像がランダムに別の画像に変化をします。
見本では６種類の画像を使用してランダムに８枚並べました。
画像種類は増減可能です。並べる枚数も増減可能です。

複数の画像がランダムに別画像に変化しますが、一種類だけは初期表示以外は必ず表示されます。
今回はその一種類は「動くJavaScriptです」という画像になります。

今回から、初めてJavaScriptで「var」ではなく「const」と「let」を使用してみました。
区別がよくわかりません。
使い方を間違えると動作しません。試行錯誤を繰り返しながら挑戦してみます。

■並んだ複数の画像がランダムに変身するJavaScript関連コーナーはこちら→　その他・変身・メニュー


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他　変身５■複数の画像並べて画像変化</title>

<!--★ここからコピー-->
<style>
body{background:#eef;}/*★背景色は薄い水色。不要なら削除*/

/*★#bsは必須。画像の表示領域。指定内容はお好みで*/
#bs{
margin:50px auto;/*★表示領域位置指定。上下50px、左右は中央*/
padding:20px;/*★表示領域と画像周囲との余白*/
width:800px;/*★表示領域の横幅指定。画像がきれいに並ぶ横幅で*/
background:#adf;/*★領域の背景色。水色*/
text-align:center;/*★画像は左右の中央寄せ*/
}

#bs img{ 
width:200px; height:130px;/*画像原寸が大きいので縮小表示指定。原寸使用なら不要*/
vertical-align:middle;/*画像の上下の隙間を消す。不要なら削除*/
}
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。画像の表示位置。id="bs"は必須-->

<div id="bs"></div>
<script>
/*================================================================================
並んだ画像がランダム変身　by 鴈野さんちのホームページ：https://t-karino.sakura.ne.jp/tk/java/java1/senobi.html
画像記述とdocument.imagesを修正。並ぶ画像を複数指定へ変更。  2025/11/11　　
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★並ぶ画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
//★表示画像総数より、多くても少なくても可。

const Img1=["mich1.jpg","mich2.jpg","mich3.jpg","mich4.jpg","mich5.jpg","mich6.jpg"];
const myurl="";           //★上記の画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

const Img2= "ugoku.png";  //★変身画像名。初期画面以外では必ずこの画像が表示。画像パス無し
const num=8;              //★表示したい画像の総数。お好みで。
const spd=2000;　　　　　 //★変身速度。1000=1秒。小さいほど速い。原本400。

//指定ここまで--------------------------------------------------------------------------

const len=Img1.length;
let i=0, p=0;
const load=new Array();//画像先読み込み。切替をスムーズにする 
for (p=0; p<len; p++){load[p]=new Image();load[p].src=myurl+Img1[p];}

let sss='';
for (i=0; i<num; i++) {
let r=Math.floor(Math.random()*len);
sss +='<img src='+myurl+Img1[r]+'>';
}

document.getElementById("bs").insertAdjacentHTML('afterbegin', sss);
const Imgs=bs.getElementsByTagName("img");  //id="bs"領域のimgの総数

//var Img2=myurl+Img2; //★const指定では再宣言不可。画像パス無しか最初から指定をvarでする。

let seqNo=0,seqNo2=0;			  //変身する画像の位置
let timerID=num;	                  //タイマー番号(表示画像数だけ必要)
function start(){ timerID=setInterval(timerD,spd);}　//ロード完了時のタイマースタート

function timerD(){
const myflg=0;		         　　　　 //必ずImg2を表示するためのフラグ
let rr=Math.floor(Math.random()*len);
Imgs[seqNo].src=Img1[rr];	           //前回の画像表示はランダム
Imgs[seqNo2].src=Img1[rr];	           //前回の画像表示はランダム
seqNo=Math.floor(Math.random()*num);   　　//表示する画像を乱数で求める
seqNo2=Math.floor(Math.random()*num);  　　//表示する画像を乱数で求める

if (myflg==0){
Imgs[seqNo].src=Img1[rr]; Imgs[seqNo2].src=Img2;} //画像変化後は必ずImg2の画像が出る
else{Imgs[seqNo].src=Img2; Imgs[seqNo2].src=Img1[rr];}
}
start();
}());//即時関数終了
</script>
<!--★コピーここまで-->

</body>
</html>

変身５■複数の画像並べて画像変化 UP日時 : 2025/11/11

　変身５■複数の画像並べて画像変化　　　　UP日時 : 2025/11/11