画像を乱数を使ってランダムに切り替えて表示する【JavaScript・jQuery】

JavaScript

2022.10.18

ウェブサービスを作っていると、「表示をランダムに切り替えたい」という場面があります。

例えば、背景画像を一定の選択肢からランダムに切り替えると、サイトを見るたびに新鮮な印象を与えることができるでしょう。

今回は、そのようなケースに使えるコードを紹介します。

コード解説
参考

コード解説

基本的な流れとしては、一定の範囲の乱数を発生させて、その乱数を使って表示を切り替える、という感じになります。

乱数を発生させる

0~2までの3パターンの乱数を発生させるコードは以下です。

rand = Math.floor(Math.random() * 3);

「Math.random() * 3」で「0以上3未満の小数」を発生させています。

これをMath.floor()を使って整数化することで、ランダムに0~2の整数を作れます。

このランダムな整数を使って、画像の表示を切り替えるデモを作ってみましょう

デモ

ボタンクリックで画像が切り替わります。

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

JS(jQuery)のコード全文

//画像urlの配列
var picsArray = [
  "https://tool-engineer.work/wp-content/uploads/2022/10/info-scaled.jpg",
  "https://tool-engineer.work/wp-content/uploads/2022/09/server.jpeg",
  "https://tool-engineer.work/wp-content/uploads/2021/10/code-scaled.jpg"
]

//画像のurlを格納する変数
var pic = "";
//乱数の初期値
var rand = 0;
//一回前の乱数（同じ画像が繰り返すのを防ぐのに使う）
var beforeRand = 0

//クリック時の挙動
$(function () {
  $(document).on('click', 'button', function (e) {
    //０〜２の乱数発生
    rand = Math.floor(Math.random() * 3);
    
    //乱数が前回と同じであれば値を変える
    if(beforeRand == rand){
      if(rand==2){
        rand = 0;
      }else{
        rand++;
      }
    }
    
    //乱数を使って配列から値を取得
    pic = picsArray[rand];
    //画像のsrcを切り替え
    $("img").attr("src",pic);
    
    //繰り返しを防ぐため前回の乱数を記憶しておく
    beforeRand = rand;
   });
 });

ポイントは、配列のキー(~番目の値)を乱数を使って指定して、ランダムに画像を切り替える点です。

また、同じ画像が連続で表示されるのをを防ぐ（生成される乱数が前回と必ず異なるようにする）ためのコードも仕込んでありますのでご確認ください。
※こちら必須ではありません。