在浏览器中使用javascript从数组中显示一行随机图片

Question

我想连续显示6张图片。最终，我想单击图片并使它像IMDB一样全屏显示。首先，尽管我需要从48个图片网址的数组中随机显示6张图片。图像正在存储在S3上。

我尝试了不同的方法，但到目前为止都没有奏效。首先，我使用了getElementById，但是在我的html <img>标记上，它没有使用id部分，而是在使用src部分并显示静态链接。我的标签如下所示：

<img src="https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_5.jpg" id="avengerPic">

浏览器显示的是avengers_5图片，而不是我的函数在id="avengerPic"中生成的图片。之所以列出avengers_5.jpg是因为我不知道该放在哪里。我用来学习如何执行此操作的资源将其作为src：images / spacer.gif。当我取下src并仅保留id时，它什么也不显示。

这是我的数组（摘要）：

let picArray = [
  "https://accountName.s3.us-east- 
  2.amazonaws.com/assets/avengers_1.jpg",
  "https://accountName.s3.us-east- 
  2.amazonaws.com/assets/avengers_2.jpg",
  "https://accountName.s3.us-east- 
  2.amazonaws.com/assets/avengers_3.jpg",
  "https://accountName.s3.us-east- 
  2.amazonaws.com/assets/avengers_4.jpg"
]

（记住，实际上有48张照片）

这是我的功能：

let moviePics = function() {
  let randomPic = Math.floor(Math.random() * picArray.length);
  document.getElementById("avengerPic").src = picArray[randomPic];
}

这是我的html：

<table>
 <tr>
  <img src="https://accountName.s3.us-east- 
  2.amazonaws.com/assets/avengers_5.jpg" id="avengerPic">
  <img src="https://accountName.s3.us-east- 
  2.amazonaws.com/assets/avengers_5.jpg" id="avengerPic">
 </tr>
</table>

我想要的结果是将阵列中的6张随机图像水平显示。我已经能够在表格中静态完成并使用CSS进行格式化。现在，我只想将其从静态图像更改为48个图像URL数组中的随机图像。最后，我将这样做，因此，当您单击图像时，它将以箭头打开全屏显示，并允许您在全部48张图像中单击鼠标左键或右键。

Answer 1

id元素应该总是是唯一的，getElementById仅采用具有id的第一个元素，因为它期望只有一个元素。因此，给img元素一个class元素。通过这些循环到then为其分配随机图像。

let picArray = [
  "https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_1.jpg",
  "https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_2.jpg",
  "https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_3.jpg",
  "https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_4.jpg"
]

let moviePics = function() {
  document.querySelectorAll('.avengerPic').forEach(function(el) {
  	const randomPic = Math.floor((Math.random() * picArray.length));
    el.src = picArray[randomPic];
  });
}

moviePics();

<table>
 <tr>
  <img src="https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_5.jpg" class="avengerPic">
  <img src="https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_5.jpg" class="avengerPic">
 </tr>
</table>