| ポイント |
<![CDATA[window.onload = function(){
var imgURL = ["images/DSC0001.jpg", "images/DSC0002.jpg", "images/DSC0003.jpg",
"images/DSC0004.jpg", "images/DSC0005.jpg", "images/DSC0006.jpg"];
var n = Math.floor(Math.random() * imgURL.length);
document.images["photo1"].src = imgURL[n];
n = Math.floor(Math.random() * imgURL.length);
document.images["photo2"].src = imgURL[n];
}
<img src="images/loading.gif" name="photo1"><br>
<img src="images/loading.gif" name="photo2"><br>
]]>
|
| 説 明 |
ページにアクセスされるたびランダムに画像を一枚表示するには、あらかじめ表示したい画像のURLを配列に入れておきます。
Math.random()で乱数を発生させ、その値に画像のURLが格納された配列の個数（長さ）を掛けます。この値は小数値になるのでMath.floor()を使って小数値以下を切り捨てます。この得られた番号を配列の参照番号（添字）として指定し画像のsrcに指定します。
スクリプトではページが完全に読み込まれた後に画像を入れ替えています。このようにするとHTML, CSS, JavaScriptを分離することができるためです。その際に、画像を入れ替える画像にはidまたはname属性で固有の名前を指定しておきます。アクセスする場合はidであればdocument.getElementById()で、nameの場合はdocument.images[]を使います。
|
| サンプル |
<![CDATA[
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>ページにアクセスするたびにランダムな画像を二枚表示する (ページ構築後に処理)</title>
<script type="text/javascript"><!--
window.onload = function(){
var imgURL = ["images/DSC0001.jpg", "images/DSC0002.jpg", "images/DSC0003.jpg",
"images/DSC0004.jpg", "images/DSC0005.jpg", "images/DSC0006.jpg"];
var n = Math.floor(Math.random() * imgURL.length);
document.images["photo1"].src = imgURL[n];
n = Math.floor(Math.random() * imgURL.length);
document.images["photo2"].src = imgURL[n];
}
// --></script>
</head>
<body>
<h1>ランダムな画像が二枚表示されます(ページ構築後に処理)</h1>
<img src="images/loading.gif" name="photo1"><br>
<img src="images/loading.gif" name="photo2"><br>
</body>
</html>
]]>
|
| 補足説明 |
なし
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
ページにアクセスするたびにランダムな画像を二枚表示する (ページ構築後に処理)
