显示多张随机图像，而不仅仅是一张

Question

下面的代码随机显示一个数组中的一个图像。我一直在尝试更改它以随机显示数组中的所有图像，但没有成功。我使用了一个while循环来生成随机函数。 random 函数起作用并随机化整个数组，但仅返回图像。数组中有 8 张图片。

function DisplayImage(i) {
    let CardImage = document.createElement('img');
    CardImage.src = `Images/${images[i].img}`;
    CardImage.alt = CardImage.src;
    document.querySelector("#box").appendChild(CardImage);
}

谢谢

Answer 1

您是否正在寻找类似这两种方法的东西？

随机选择一张图片：

function DisplayImage(totalImages) {
  const i = Math.floor(Math.random() * totalImages)
  let CardImage = document.createElement('img');
  CardImage.src = `Images/${images[i].img}`;
  CardImage.alt = CardImage.src;
  document.querySelector("#box").appendChild(CardImage);
}

或随机化所有图像：

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }

  return array;
}

function DisplayImage(totalImages) {
  const items = [...Array(totalImages).keys()]
  const randomItems = shuffle(items) 

  randomItems.forEach(item => {
    let CardImage = document.createElement('img');
    CardImage.src = `Images/${images[item].img}`;
    CardImage.alt = CardImage.src;
    document.querySelector("#box").appendChild(CardImage);
  })
}