JavaScriptを使って、複数の画像からランダムに1つを選んで表示させる方法

あらかじめ登録しておいた画像群の中から、1枚をランダムに選んでウェブページ上に表示させるには、例えば次のようなソースをHTML中(の画像を表示したい箇所)に記述します。
<script type="text/javascript">
   var imglist = new Array(
      "flowerA.jpg",
      "flowerB.jpg",
      "flowerC.gif",
      "flowerD.gif" );
   var selectnum = Math.floor(Math.random() * imglist.length);
   var output = "<img src=" + imglist[selectnum] + ">";
   document.write(output);
</script>
上記のソースが、記述するソースのすべてです。

このソースのうち、太字で掲載した部分(3~6行目の計4行)に、表示候補の画像ファイル群を列挙しています。ここは、実際に用意したファイル名に合わせて修正して下さい。ここでは4つの画像ファイルを指定していますが、もっと増やすこともできます(減らすこともできます)。

画像ファイル名は引用符「"」を使って囲み、半角カンマ記号「,」で区切って必要なだけ列挙します。なお、最後の1つの後にだけはカンマ記号は不要ですから注意して下さい。

複数の画像群からランダムに1つを選択するスクリプトの解説

画像ファイル群が何個あっても、(画像ファイル名を修正する部分以外については)そのままコピー&ペーストするだけで動作します。したがって、特にソースの内容を理解しておく必要はありません。しかし、望みに応じてカスタマイズしやすいように、上記ソースの内容について、以下に簡単に解説しておきます。

2~6行目:画像ファイル群を登録
var imglist = new Array("画像1","画像2","画像3","画像4" );
最初に、「imglist」という名称で配列を作成しています。この配列の中に、表示候補の画像ファイル名を格納しています。カンマ記号で区切って、いくつでも必要なだけ列挙して下さい。先のソースでは、見やすくするために途中で改行していますが、改行はあってもなくても構いません。

画像がHTMLと同じ階層(ディレクトリ)にある場合は、ファイル名を書くだけで読み込めます。もし、他の階層にある場合は、相対パスや絶対パスで記述して下さい。「http://」から記述しても構いません。

7行目:「0」以上「指定数」未満の範囲内からランダムに1つの数値を得る
var selectnum = Math.floor(Math.random() * imglist.length);
ここで、変数selectnumに、ランダムに選んだ画像番号が入ります。上記の右辺では、以下の(a)~(d)で示す処理をしています。

  • (a) まず、「Math.random()」の記述で、0以上1未満のランダムな数値が1つ小数で得られます。例えば、「0.07019」・「0.60223」・「0.79171」などです。
  • (b) 「imglist.length」は、2~6行目で作成した配列「imglist」の大きさです。例えば、画像を4つ用意しているなら、「imglist.length」の値は「4」になります。
  • (c) 上記の(a)と(b)を掛けることで、「0」以上「配列の大きさ」未満のランダムな数値(小数)が得られます。例えば、「0.28076」・「2.40892」・「3.16684」などです。
  • (d) 最後に、小数点以下を切り捨てて整数にします。「Math.floor(xxx)」は、引数xxxの数値より小さい「最大の整数」を返すメソッドです。例えば、「0.28076」は「0」に、「2.40892」は「2」に、「3.16684」は「3」になります。

これによって、例えば画像の数が4つであれば、「0」・「1」・「2」・「3」のどれかの値がランダムに得られます。

※JavaScriptでは、配列の番号は「0」から始まるため、画像が4つなら、「1~4」ではなく「0~3」から1つを選ぶ必要があります。

8行目:画像を表示するためのimg要素を生成
var output = "<img src=" + imglist[selectnum] + ">";
最後に、変数「output」に、出力するHTMLソース(img要素)を作成しています。ここの右辺を書き換えれば、出力するHTMLを自在に変更できます。「imglist[selectnum]」と記述することで、ランダムに選ばれた1つの画像ファイル名が得られます。

9行目:出力
document.write(output);
作成したHTMLソース(変数outputの中身)を出力しています。この行がある位置に、画像を表示するためのHTMLソースが挿入されます。
 

JavaScript非対応ブラウザへの対策

昨今、JavaScriptに非対応だったり、JavaScript機能をオフに設定されている環境は少ないでしょうが、念のためそれらの環境を利用しているアクセス者への配慮も忘れずに施しておきましょう。次のようなHTMLを1行加えておきます。
<noscript>
   <img src="flowerA.jpg" alt="花の画像">
</noscript>
上記のソースは、スクリプトが実行できない環境で閲覧された場合にだけ、画像を1つ表示するHTMLです。ランダムに表示する予定だった画像の中から1つを表示させています。こうしておけば、JavaScriptをOFFにしているアクセス者でも、1つの画像だけは見えることになります。

表示例

アクセスするたびに異なる画像が表示される

アクセスするたびに異なる画像が表示される

上記のソースを使ったサンプルページを用意しています。お使いのブラウザで動作を確認したり、ソースをコピー&ペーストして使ってみる際などにご活用下さい。

複数の画像からランダムに1枚を選んで表示する例


 

複数の画像群からランダムに1つを表示させたい

今回は、閲覧者がウェブページにアクセスするたびに異なる画像が表示される、「ランダムに画像を表示させる」仕組みの作り方をご紹介致しました。とても短いJavaScriptソースだけで実現できることがお分かり頂けたと思います。ぜひ、試してみて下さい。

なお、続編記事として、「複数の画像リンクからランダムに1つを表示する方法」を公開しています。今回のように、ただ画像を掲載するだけでなく、「リンクにした画像」をランダムに掲載したい場合には、ぜひご参照下さい。

【関連記事】


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。