重新加載 HTML 瀏覽器時如何獲取隨機圖像？使用 javascript、css 和 html

Question

我已經檢查了關於這個主題的答案，我嘗試了很多，但仍然對我不起作用。 我希望在重新加載 HTML 頁面時出現不同的圖像。

現在，我有這個非常簡單的代碼：

HTML：

<head>

<script type="text/javascript" src="../src/index.js"></script>

</head>

<body>
  <div id="container">
    <img id="image_shower_vehicule" class="vehicule" />
  </div>
</body>

</html>

CSS：

#container{
    position:relative;
    width:400px;
    height:400px;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    z-index:0;
}

.vehicule {
  position:absolute;
  z-index: 1;
}

JS：

var images_array_vehicule = ['vehicule1.png','vehicule2.png','vehicule3.png'];

function getRandomImagevehicule() {

random_index_vehicule = Math.floor(Math.random() * images_array_vehicule.length);
selected_image_vehicule = images_array_vehicule[random_index_vehicule];
document.getElementById('image_shower_vehicule').src =`../public/layers/vehicule/${selected_image_vehicule}`;

}

我有以下文件夾目錄...： https://i.stack.imgur.com/xtnML.png

有什么可以幫助我的想法嗎？

未來的步驟是對不同的圖層做同樣的事情，並用 z-index 覆蓋選擇的圖像，但現在我只想在重新加載頁面時有一個隨機圖像。

謝謝你的幫助！

Answer 1

嘗試這個：

調用函數加載：

<body onload="getRandomImagevehicule()">.... </body>

js代碼：

 var images_array_vehicule = ['vehicule1.png','vehicule2.png','vehicule3.png']; function getRandomImagevehicule() { random_index_vehicule = Math.floor(Math.random() * images_array_vehicule.length); selected_image_vehicule = images_array_vehicule[random_index_vehicule]; document.getElementById('image_shower_vehicule').src =`../public/layers/vehicule/${selected_image_vehicule}`; }

 #container { position:relative; width:400px; height:400px; margin-left: auto; margin-right: auto; background-color: black; z-index:0; }.vehicule { position:absolute; z-index: 1; }

 <body onload="getRandomImagevehicule()"> <div id="container"> <img id="image_shower_vehicule" class="vehicule" /> </div> </body>

重新加載 HTML 瀏覽器時如何獲取隨機圖像？使用 javascript、css 和 html

問題描述

1 個解決方案

解決方案1
0 2021-11-26 20:36:50

重新加載 HTML 瀏覽器時如何獲取隨機圖像？ 使用 javascript、css 和 html

問題描述

1 個解決方案

解決方案1 0 2021-11-26 20:36:50

重新加載 HTML 瀏覽器時如何獲取隨機圖像？使用 javascript、css 和 html

解決方案1
0 2021-11-26 20:36:50