使用原生JS实现页面刷新时随机显示多张图片的代码
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本段代码展示了如何利用纯JavaScript在网页加载时随机选取并展示一组预设图片中的任意几张，为用户提供动态且丰富的视觉体验。
使用原生JavaScript可以让页面在刷新时随机显示多张图片。实现这一功能的方法是通过数组存储所有要展示的图片路径，然后利用Math.random()函数从数组中随机选择一张图片进行显示。
具体代码示例如下：
1. 首先定义一个包含所有图片URL的数组。
2. 使用window.onload或DOMContentLoaded事件确保页面加载完成后执行脚本。
3. 生成0到图片数量之间的随机数，然后根据这个数字在数组中选取相应的元素作为要展示的图片。
下面是一个简单的示例代码：
```javascript
var images = [image1.jpg, image2.jpg, image3.jpg]; // 定义一个包含所有可能显示图像URL的数组
function changeImage() {
var randomIndex = Math.floor(Math.random() * images.length); // 随机选择图片索引值。
document.getElementById(random-image).src = images[randomIndex]; // 设置选定的随机图片为id=random-image元素的内容
}
window.onload = function () { changeImage(); }; // 页面加载完成后执行changeImage()函数，实现刷新时随机显示一张图片的效果。
```
这样每当你重新加载页面的时候，“random-image” ID 的 `` 标签就会展示数组中的一张随机图片。
全部评论 (0)
