画像をランダムに表示する方法！JavaScriptで切り替え [ホームページ作成] All About

画像をランダムに表示する方法！JavaScriptで切り替え

複数の画像リストの中から、JavaScriptでランダムに1つが選ばれて表示される仕組みを作ってみましょう。お気に入りの写真の中から1枚だけを毎回ランダムに選んで大きく表示させたい場合などに活用できます。

JavaScriptの乱数を使ってランダムに画像を表示することで、アクセスするたびに異なる画像が見える

アクセスするたびに1枚がランダムに選ばれるだけなので、スライドショーで画像を順番に表示する場合とは異なり、大きなスクリプトを読み込んだり書いたりする必要はありません。リアルタイムに切り替わっていくわけではないので、ブラウザ上の表示はうるさくなりません。乱数を使って表示対象を選ぶだけの短いJavaScriptソースで作れます。ぜひ試してみて下さい。

【本記事の目次】

JavaScriptを使ってランダムに表示画像を切り替えるサンプル

本記事で作成方法をご紹介するランダム画像表示スクリプトの動作サンプルは下記の通りです。

■ランダムに画像を表示：

このページを再読み込みしてみて下さい。ページが表示されるたびに、上記の枠内に掲載されている花の画像が変化するはずです。ただし、画像は4種類しか用意していないので再読み込みしてもたまたま同じ画像が連続で表示されることはあります。その場合でも、2～3回再読み込みしてみれば変わるでしょう。

※JavaScriptをOFFにしている環境ではランダムには表示されません。その場合は、常に同じ画像が表示されるように記述してあります。

ここでは、次の4つの画像を用意しました。

先の枠内には、これらの画像のどれかが表示されているはずです。

JavaScriptで画像を毎回ランダムに切り替える手順

複数の画像ファイル群からランダムに1枚を選んで表示させるには、JavaScriptを使えば簡単です。表示候補の画像ファイルリストを事前に用意しておき、乱数を使って1つを選び出して表示すれば良いだけですから。

画像リストの中からJavaScriptの乱数を使って毎回ランダムに1画像を選び出す

必要なJavaScriptの処理は、主に下記の3点です。

まず、表示候補の画像ファイル名をすべて配列に登録しておきます。
その中から、アクセスされるたびに乱数を使って1枚を選びます。
その選んだ画像1つだけをウェブページ上に表示します。

上記のような機能をJavaScriptで作る方法として、まずは下記に必要な全ソースを掲載しておきます。コピー＆ペーストして使ってみて下さい。その後で、ソースの各部分についての詳しい説明を加えます。ソースをカスタマイズしたい際に参考にして下さい。

乱数を使ってランダムに表示画像を選ぶJavaScriptソースの書き方

あらかじめ登録しておいた画像ファイル群の中から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つの後にだけはカンマ記号は不要ですから注意して下さい。この点は間違えがちなので特に注意が必要です。なお、ファイル名にはディレクトリを含めても構いませんし、「http://」などで始まるURLを書いても構いません。

望みに応じてカスタマイズしやすいように、上記ソースの各部分について、以下で簡単に解説しておきます。

Step.1 表示候補の画像ファイルを配列に加える

先のJavaScriptソースの2～6行目は、以下のように書きました。ここでは、画像ファイル群を配列に登録しています。

var imglist = new Array("画像1","画像2","画像3","画像4" );

まず「imglist」という変数名で配列を作成しています。この配列の中に、表示候補の画像ファイル名を格納しています。カンマ記号で区切って必要なだけ列挙して下さい。個数に上限はありません。先のソースでは見やすくするために途中で改行しましたが、改行はあってもなくても構いません。

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

Step.2 乱数を生成するMath.random()でランダムに1つの整数を得る

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つを選ぶ必要があります。

Step.3 画像を表示するimg要素を動的に生成する

8行目は、以下のように書きました。ここでは画像を表示するimg要素を生成しています。

var output = "<img src=" + imglist[selectnum] + ">";

変数「output」に、出力するHTMLソース(img要素)を格納しています。右辺を書き換えれば出力HTMLを自由に変更できます。太字で示した「imglist[selectnum]」の部分は、「配列imglist」内の「selectnum番目」の値を表しています。つまり、ランダムに選ばれた1つの画像ファイル名が得られます。

Step.4 完成したHTMLソースを出力する

最後に9行目で、完成したHTMLソースを出力しています。

document.write( output );

作成したHTMLソースは変数「output」に入っていますから、この中身をそのまま出力しているだけです。この行が書かれた位置に、画像を表示するHTMLソースが挿入されます。

補足. JavaScriptを実行しない環境へも対応させる書き方

現在ではJavaScriptに非対応な環境はほとんどないでしょうし、JavaScript機能をオフに設定して使っている閲覧者も少ないでしょう。しかし、念のためにJavaScriptが実行されない環境への配慮も施しておくなら、以下のようなHTMLソースを先のJavaScriptソースの後に加えます。

<noscript>
   <img src="flowerA.jpg" alt="花の画像">
</noscript>

noscript要素は、スクリプトが実行されない環境でだけ表示される要素です。ここでは、ランダムに表示する予定だった画像の中から1つを表示させています。このように書いておけば、JavaScriptが実行されなくても、1つの画像だけは見えます。

完成したJavaScriptによる画像のランダム表示サンプルページ

これまでにご紹介したソースを使ったサンプルページを用意しました。お使いのブラウザで動作を確認したい際などにご覧下さい。
→複数の画像からランダムに1枚を選んで表示するサンプルページ

JavaScriptの乱数を使ってランダムに画像を表示することで、アクセスするたびに異なる画像が見える

JavaScriptの乱数を使って複数の画像群からランダムに1画像を表示させる方法

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

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

【関連記事】