サイトにランダム画像を表示する

2010-07-2222:55

ランダム画像を表示する方法について。

HTMLの画像を表示したい箇所に次のJavaScriptのコードを書きます。

<script type="text/javascript">
<!--
randImg = new Array();
randImg[0] = "image1.jpg";
randImg[1] = "image2.jpg";
randImg[2] = "image3.jpg";
n = Math.floor(Math.random()*randImg.length);
document.write("<img src=\""+randImg[n]+"\">");
// -->
</script>

その後、image1.jpg等となっている箇所に画像のURLを書くと完成です。

なお、このコードは画像が3枚の場合を想定しています。

画像を増やす又は減らす場合はコードを次のようにして下さい。

/* 4枚まで対応 */
/* 前半省略 */
randImg = new Array();
randImg[0] = "image1.jpg";
randImg[1] = "image2.jpg";
randImg[2] = "image3.jpg";
randImg[3] = "image4.jpg";　/* 4枚目を追加 */
/* 後半省略 */

/* 2枚まで対応 */
/* 前半省略 */
randImg = new Array();
randImg[0] = "image1.jpg";
randImg[1] = "image2.jpg";
/* 後半省略 */