[英]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.