i-f – Web Works –

jsで画像をランダムに切り替える方法！

JavaScript

この記事では、jsを使用して、画像をランダムに切り替える方法を書いています。

「画像をランダムに切り替える」と聞くと、難しそうに聞こえますが、実際難しいことはありません。

コピペで完了してしまうくらい、簡単な記述でできてしまいます。

お急ぎの方は、【サンプルコード】画像をランダムに切り替える！をご覧ください。

記述の内容を理解したい方は、最後までお読みいただければ、詳しく書いています。

  1. 画像をランダムに切り替える方法。
  2. Math.random()の使い方。
目次

【サンプルコード】画像をランダムに切り替える！

See the Pen ランダムに画像を入れ替える方法 by 1buk1 (@1buk1) on CodePen.

ページをリロードするたびに、３枚の画像が切り替わります。

HTML、CSSでは、画像切り替えの設定に関することはしていません。

画像切り替えは、jsを使っています。

以下、詳しく書いておきます。

Math.random()を使ってランダムな整数を生成する。

切り替えの仕組みは難しくありません。

任意の発火のタイミング（サンプルコードはリロード）の際に、配列にランダムな数値を割り当てて、配列から画像を呼び出し、imgタグのsrcを書き換えてあげます。

ランダムな数値を生成するには、Math.random()を使用します。

なにも指定しないと、Math.random()は０以上１未満のランダムな数値を返しますので、ここでは画像の枚数まのでの値を指定数するために、下記のようにしています。

Math.random() * array.length

Math.random() へ* array.lengthとすることで、配列に入っている数以下の数値を上限とすることができます。

Math.random() * array.lengthで生成された数値を配列に渡してあげるわけですが、Math.random()は、少数点以下の数値も出力されるため、このまま渡してしまうと、エラーとなってしまいます。

整数にするために、Math.floorを使って、小数点以下を切り捨てます。

小数点以下を切り捨てることで、配列未満の数値で、０まで返してくれるようになります。

サンプルコードでは、配列に３つの画像が含まれています。

画像の枚数列番号画像の名前
10画像１
21画像２
32画像３

以上のように、実際の画像の枚数・画像の名前に対して、配列の番号は−１となっているため、Math.floorで少数点以下を切り捨てることで、ちょうどよく、０〜２までの列番号とすることができます。

生成される数値は、０〜2.999….となるためです。

配列へ生成した整数を与えて画像を切り替える。

最後は、imgタグのsrcのパスを着替えてあげます。

// imgタグを取得
const t = document.getElementById('js-taeget');

// ランダムに入れ替えたい画像を配列に格納
const array = [
  'https://images.unsplash.com/photo-1754172111686-89a5782b18c6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTg1ODg1OTZ8&ixlib=rb-4.1.0&q=85',
  'https://images.unsplash.com/photo-1754764972197-f1f6b3349a5d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTg1ODg1OTZ8&ixlib=rb-4.1.0&q=85',
  'https://images.unsplash.com/photo-1756877881647-b74acb81c97e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTg1ODg1OTZ8&ixlib=rb-4.1.0&q=85'
];

// 配列に入っている画像の数を上限にランダムな数値を生成
const changeImage = Math.floor( Math.random() * array.length );

// 画像のソースを取得して、画像の配列へランダムな数値を与えて呼び出す。画像のソースを書き換え。
t.src = array[changeImage];

最後のt.src = array[changeImage];でsrcを書き換えています。

const array = []の中は、絶対バスでも、相対パスでも構いません。切り替えたい画像のパスを記述してください。

以上で画像のランダム切り替えは完了です。

画像の切り替えはリロード以外でも可能！

今回はは、リロードをjsの発火タイミングとしましたが、実際はリロード以外でも可能です。

基礎となる記述を覚えておき、任意のタイミングで発火させてつかってみてください。

私もリロード以外で使うことがあったら、追記していきたいと思います。