title

Top  >> へっぽこJavaScript  >> ランダム画像表示

ランダム画像表示

 概要

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


このページのTop へ

 動作

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


このページのTop へ

 ソース

/* プログラム       :ランダム画像表示  */
/* 画像の配列名       :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>

このページのTop へ

 解説

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

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


このページのTop へ