画像をランダムに表示するJavaScript（外部ファイル化）
複数の画像から指定する数の画像を表示するjavascript（以下、js）。
下記HTMLを表示したいところに設置。
HTML
<ul id="randImglist">
<script src="js/random-images.js"></script>
</ul>※jsのパスは自分の環境に合わせる。
※スタイルは省略。任意で設定してください。
jsで吐き出されるHTML
HTML
<li>
<a href="" target="_blank">
<figure>
<img src="" alt="">
</figure>
</a>
</li>画像ランダム表示js
5個の画像から2個を表示するサンプルコード。
jsを外部ファイル化し、ファイル名を”random-images.js”とします。
JavaScript
document.addEventListener("DOMContentLoaded", function () {
const list = document.getElementById("randImglist");
// アイテム情報（URL・画像パス・代替テキスト）
const itemsData = [
{ url: "", imgSrc: "", alt: "" },
{ url: "", imgSrc: "", alt: "" },
{ url: "", imgSrc: "", alt: "" },
{ url: "", imgSrc: "", alt: "" },
{ url: "", imgSrc: "", alt: "" }
];
// 配列をシャッフルする関数（Fisher-Yatesアルゴリズム）
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
shuffle(itemsData); // 配列をシャッフル
const selectedItems = itemsData.slice(0, 2); // 最初の2個を取得
// シャッフルされた2個のアイテムをリストに追加
selectedItems.forEach(item => {
const li = document.createElement("li");
const a = document.createElement("a");
const figure = document.createElement("figure");
const img = document.createElement("img");
a.href = item.url;
a.target = "_blank";
img.src = item.imgSrc;
img.alt = item.alt;
figure.appendChild(img);
a.appendChild(figure);
li.appendChild(a);
list.appendChild(li);
});
});
6～10行目：リンク先、画像パス、代替テキストを設定。読み込む画像を増やす場合はここを増やす。
22行目：表示する数を設定