[英]Display a row of random pictures in browser from an array using javascript
我想连续显示 6 张图片。 最终我想点击图片并让它像 IMDB 一样全屏显示。 首先,虽然我需要从 48 个图像 url 的数组中随机显示 6 张图片。 图像存储在 S3 上。
我尝试了不同的方法,但到目前为止都没有奏效。 首先我使用 getElementById 但在我的 html <img>
标签上,它没有使用 id 部分,而是使用 src 部分并显示 static 链接。 我的标签看起来像这样:
<img src="https://accountName.s3.us-east-2.amazonaws.com/assets/avengers_5.jpg" id="avengerPic">
浏览器显示的是 avengers_5 图片,而不是我在id="avengerPic"
中的 function 生成的图片。 我列出 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张照片)
这是我的 function:
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 格式化。 现在我只想将它从 static 图像更改为我的 48 个图像 url 数组中的随机图像。 最后,我会这样做,所以当您单击图像时,它会打开带有箭头的全屏,允许您在所有 48 个图像中单击左或右。
id
元素应该始终是唯一的, getElementById
只接受具有该id
的第一个元素,因为它只需要一个元素。 因此,给img
元素一个class
元素。 循环遍历这些,然后为其分配一个随机图像。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.