複数の画像の中から、ランダムに1つを選んで表示したい

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

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

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

スライドショーで順番に表示する場合とは異なり、アクセスするたびに1枚が選ばれるだけなので、大きなスクリプトを読み込んだり書いたりする必要はありません。とても短いJavaScriptで実現できます。

ランダムに画像を表示:

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

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

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

花の画像A 花の画像B 花の画像C 花の画像D

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

複数の表示候補画像の中から、ランダムに1枚だけを表示させるには?

複数の画像ファイルの中から1つだけを選んで表示する

複数の画像ファイルの中から1つだけを選んで表示する

さて、複数の画像群の中から、ランダムに1枚の画像を選んで表示させるにはどうすればよいでしょうか? 方法はいろいろ考えられますが、JavaScriptを利用するのが手軽です。必要な記述は、下記のようなほんの少しの量だけで済みます。

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

以上の3ステップの処理で完成です。とても簡単です。

今回は、上記のような機能をJavaScriptで作る方法をご紹介致します。短い記述で実現できますし、ほぼコピー&ペーストするだけで済みますので、ぜひ試してみて下さい。

それでは次のページで、JavaScriptでランダムに1枚の画像を表示させる具体的な記述方法を見てみましょう。