网站开发需求：生成18个含随机src的壁纸卡片

需求回顾 #

需要在mainWallpapersPanel容器内生成18个图片卡片，每个卡片的图片src为随机的wp[数字].png格式路径（数字对应你的图片编号序列）。

实现方案（JavaScript动态生成） #

我们可以用JavaScript动态创建卡片元素，并为每张图片分配随机编号，以下提供两种常用场景的代码：

场景1：允许图片重复出现

如果不介意同一张图片多次展示，直接生成随机编号即可：

<!-- 保留主容器，移除原有示例卡片 -->
<div class="mainWallpapersPanel"></div>

<script>
const container = document.querySelector('.mainWallpapersPanel');
const totalCards = 18;
const totalImages = 18; // 替换为你实际的图片总数

for (let i = 0; i < totalCards; i++) {
  // 生成1到totalImages之间的随机整数
  const randomImgNum = Math.floor(Math.random() * totalImages) + 1;
  // 构建卡片HTML
  const card = `
    <div class="wallpaperCard">
      <a href="#">
        <img src="images/wp${randomImgNum}.png" alt="壁纸 ${randomImgNum}" class="wallpaperIMG">
      </a>
      <h4>
        <a href="#" class="downloadLink">download</a>
      </h4>
    </div>
  `;
  // 将卡片插入容器
  container.insertAdjacentHTML('beforeend', card);
}
</script>

场景2：禁止图片重复（每张图片仅展示一次）

如果需要18张图片各出现一次，可通过洗牌算法打乱编号序列：

<div class="mainWallpapersPanel"></div>

<script>
const container = document.querySelector('.mainWallpapersPanel');
const totalCards = 18;

// 洗牌函数：打乱数组顺序
function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

// 生成1到18的编号数组并打乱
const shuffledImgNums = shuffle(Array.from({ length: totalCards }, (_, idx) => idx + 1));

// 遍历打乱后的数组生成卡片
shuffledImgNums.forEach(num => {
  const card = `
    <div class="wallpaperCard">
      <a href="#">
        <img src="images/wp${num}.png" alt="壁纸 ${num}" class="wallpaperIMG">
      </a>
      <h4>
        <a href="#" class="downloadLink">download</a>
      </h4>
    </div>
  `;
  container.insertAdjacentHTML('beforeend', card);
});
</script>

注意事项 #

• 若你的图片总数不是18，修改代码中的totalImages（场景1）或totalCards（场景2）即可；
• 为img标签添加了alt属性，提升页面可访问性，可根据需求自定义文本；
• 确保图片文件路径正确（images/目录下存在wp1.png至wpN.png）。

内容的提问来源于stack exchange，提问作者Ahmed Rameez