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

2010-07-2222:55

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

HTMLのランダム画像を表示したい箇所に次のJavaScriptのコードを書きます（コピペOKです）。

<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";
/* 後半省略 */

基本的には画像の枚数に合わせて括弧の中の数字（0から連番になるようにする）と画像のURLを変えるだけです。