image - 如何在页面刷新时更改图像

Question

我想更改在 html 中调用的页面刷新时的 5 个图像集。
图片应该在 body 标签下调用：

 <img src="images/side-logos/1.jpg" alt="">
 <img src="images/side-logos/2.jpg" alt=""> 
 <img src="images/side-logos/4.jpg" alt=""> 
 <img src="images/side-logos/5.jpg" alt="">

我想在不在 javascript 中的 body 标记下调用图像集。
我在网站上搜索了很多，但每个人都在 javascript 中调用图像而不是在 body 标记下。
因此，如果有人有解决方案，请帮助我。

Answer 1

只需将 onclick 事件替换为窗口刷新事件

HTML

<div id="box">
    <img id="image" />
</div>
<br />
<input type="button" value="Randomize!" onClick="randImg()" />

JS

var images = [
    "http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
    "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];

function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = images[x];
}

randImg();

演示

编辑 new_demo

Answer 2

不幸的是，您只能使用 javascript 来执行此操作。

为此，这里有一些放置在标签中的代码

<script type="text/javascript">
function Randomize() {
    var images = new Array("one.jpg","two.jpg","three.jpg","four.jpg");
    var imageNum = Math.floor(Math.random() * images.length);
    document.getElementById("divid").style.backgroundImage = "url('" + images[imageNum] + "')";
}

window.onload = Randomize;
</script>

图像的名称应该在图像数组中，而“divid”是您希望图像出现的位置。