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

我想连续显示6张图片。最后我想点击图片，让它像IMDB一样全屏显示。首先，我需要从48个图像URL数组中随机显示6张图片。图像存储在S3上

我尝试过不同的方法，但迄今为止没有一种有效。首先，我使用了getElementById，但在我的html

浏览器显示的是复仇者5图片，而不是由我的函数在
id=“avengerPic”
中生成的图片。我之所以将复仇者5.jpg列入名单，是因为我不知道还有什么可以放在那里。我用来学习如何做到这一点的资源是src:images/spacer.gif。当我取下src并只留下id时，它什么也不显示

这是我的阵列（节略）：

（记住，总共有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个图像中单击鼠标左键或右键。
id

元素应该始终是唯一的，

getElementById

只取第一个具有该id的元素，因为它只需要1个元素。因此，为

img

元素指定一个

class

元素。将这些图像循环到，然后为其指定一个随机图像

让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"
]
让moviePics=function（）{
document.queryselectoral（'.avengerPic'）.forEach（函数（el）{
const randomPic=Math.floor（（Math.random（）*picArray.length））；
el.src=picArray[randomPic]；
});
}
电影（）
元素
id
应该始终是唯一的，
getElementById
只接受具有该
id
的第一个元素，因为它只需要1个元素。因此，为
img
元素指定一个
class
元素。将这些图像循环到，然后为其指定一个随机图像


让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"
]
让moviePics=function（）{
document.queryselectoral（'.avengerPic'）.forEach（函数（el）{
const randomPic=Math.floor（（Math.random（）*picArray.length））；
el.src=picArray[randomPic]；
});
}
电影（）

不同图像使用相同ID时，可能存在重复。对于每个图像，您应该有不同的id。可能的副本是您对不同的图像使用相同的id。对于每张图片，您应该有不同的id。非常感谢您的回复。我已经将代码更改为您建议的方式，但是它仍然不起作用。它仍然显示了复仇者5号的照片，src。哇，好的，它工作了！我将脚本行移到结束body标记之前，现在它可以工作了！非常感谢。非常感谢您的回复。我已经将代码更改为您建议的方式，但是它仍然不起作用。它仍然显示了复仇者5号的照片，src。哇，好的，它工作了！我将脚本行移到结束body标记之前，现在它可以工作了！非常感谢。
<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>