JavaScriptのランダム表示する方法―配列に設定した画像をランダム表示サンプルなど

Mathオブジェクトのrandomメソッドとfloorメソッドを用いて、配列に設定した画像をランダム表示サンプルなど。JavaScriptのランダム表示する方法をまとめています。

▲記事トップへ

1. ランダム表示に必要なメソッド

ランダム表示に使用するMathオブジェクトのrandomメソッドとfloorメソッドについての簡単な補足説明です。

ランダムとは

ランダムとは、事象の発生に法則性がなく、予測が不可能な状態という意味です。英語はramdomです。

ramdom()メソッド

Mathオブジェクトのramdom()メソッドは、0以上1未満の範囲で実数の乱数を発生させます。

floor()メソッド

ramdom()メソッドの戻り値は実数です。これを整数に変換するには、Mathオブジェクトのfloor()メソッドを利用することで小数点以下を切り捨てて、整数にすることができます。

2. 配列に設定した画像をランダム表示する例

配列に設定した画像をランダム表示するサンプルを作成しながら、JavaScriptでランダム表示する方法について見ていきます。

サンプルで使用する画像

以下のサンプルでは、画像を使用します。画像は自由に選んでいただければと思います。一応、以下の「image01.jpg」「image02.jpg」「image03.jpg」を用意しました。

配列に画像パスを設定してランダム表示

配列に画像パスを設定してランダム表示するサンプルです。

サンプルソース

imgs配列に画像ファイルのパスを設定して、randomメソッドで取得した0～1の値と配列の長さを掛けて配列の要素をランダムに指定して表示します。 randomメソッドの値は小数点を含むものなのでfloorメソッドで小数点を取り除きます。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
imgs = new Array();
imgs[0] = "image01.jpg";
imgs[1] = "image02.jpg";
imgs[2] = "image03.jpg";
n = Math.floor(Math.random() * imgs.length);
document.write("<img src='" + imgs[n] + "'/>");
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

表示するとランダムに選ばれた画像が表示されます。

F5などで更新すると再びランダムに選ばれた画像が表示されます。

3. 画像を管理するオブジェクトを使用してランダム表示する例

上記のサンプルでは、画像ファイル以外の情報を扱う場合、別の配列をもう1つつくるなど面倒が生じます。画像を表現するオブジェクトを定義して、このオブジェクトを配列に設定すると画像パス以外の情報も扱えて便利です。

サンプルソース

今度はimgタグのsrc属性に指定する画像ファイルパス以外にalt属性の情報も扱ってみます。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function DisplayImage(alt, src) {
    this.alt = alt;
    this.src = src;
    this.getAlt = function() {
        return this.alt;
    };
    this.getSrc = function() {
        return this.src;
    };
}

var imgs = new Array();
imgs[0] = new DisplayImage("画像１", "image01.jpg");
imgs[1] = new DisplayImage("画像２", "image02.jpg");
imgs[2] = new DisplayImage("画像３", "image03.jpg");

n = Math.floor(Math.random() * imgs.length);
document.write("<img alt='" + imgs[n].getAlt() + "' src='" + imgs[n].getSrc() + "'/>");
</script>
</body>
</html>