数種類の画像をランダムで表示させたい場合に便利なスクリプトです。 サイトにアクセスしたり、リロードしたりする度に違う画像を表示する事ができます。

↓↓　ブラウザ画面を更新すると当サイトのバナーがランダムに変化します。

/* プログラム　　　　　　　：ランダム画像表示  */
/* 画像の配列名　　　　  　：image_list 　　 　*/
/* 擬似乱数による配列番号　：image_number　  　*/

<script type="text/javascript">
<!--

	var image_list = new Array(
		"random_image/campus-note1.gif",
		"random_image/campus-note2.gif",
		"random_image/campus-note3.gif" );

	var image_number = Math.floor(Math.random() * image_list.length);
	document.write("<img src=" + image_list[image_number] + ">");

//-->
</script>

<!-- JavaScript未対応の処理 -->
<noscript>
	<img src="random_image/campus-note1.gif">
</noscript>

　まず、画像を格納するための配列を用意し、各画像のパスを入れておきます。 次に、Math.random で０以上１未満の乱数を生成します。 これを、配列の長さ分だけ倍にします。 例えば、配列が３つであれば、０以上３未満の乱数が生成されます。 得られた乱数に対してMath.floor を適用し、乱数の小数点以下を切り捨てます。 例えば、乱数で2.4という値が得られれば、切り捨てて整数値２を得ます。

　得られた整数値をそのまま配列の番号に入れます。 つまり、得られた整数値が０以上〜１未満であれば０番目の配列、１以上〜２未満であれば１番目の配列、２以上〜３未満であれば２番目の配列の中身が画像として表示されます。 このようにして、表示される画像がランダムに変化します。 Javascript 未対応の場合でも必ず表示されるように <noscript> の処理を追加します。