重新加载 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