HTML技术:如何在网页中图片的随机显示
时间: 2024-02-29 12:52:50 浏览: 20
要在网页中随机显示图片,可以使用 JavaScript 和 HTML 的 `<img>` 标签。以下是一种实现方法:
1. 在 HTML 中创建一个 `<img>` 标签,并设置其 `id` 属性和 `src` 属性,如下所示:
```
<img id="random-img" src="image1.jpg">
```
2. 在 JavaScript 中创建一个数组,包含要随机显示的图片的文件名,如下所示:
```
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
```
3. 创建一个 JavaScript 函数,该函数将随机选择数组中的一个图片,并将其设置为 `<img>` 标签的 `src` 属性,如下所示:
```
function randomImage() {
var randomIndex = Math.floor(Math.random() * images.length);
var img = document.getElementById("random-img");
img.src = images[randomIndex];
}
```
4. 在 HTML 中调用该函数,以便在页面加载时随机显示一张图片,如下所示:
```
<body onload="randomImage()">
```
5. 如果希望用户在页面上的某个事件(例如点击按钮)后随机显示不同的图片,可以将该函数绑定到该事件上,例如:
```
<button onclick="randomImage()">随机显示图片</button>
```