html随机显示图片,不把图片放在一个数组里的方法
时间: 2023-12-10 11:42:06 浏览: 74
你可以使用JavaScript和DOM操作来实现随机显示图片。具体步骤如下:
1. 在HTML中创建一个空的<img>标签,用于显示图片。
2. 在JavaScript中创建一个包含图片路径的数组,用于随机获取图片路径。
3. 使用Math.random()方法生成一个0到1之间的随机数,然后将其乘以图片路径数组的长度,使用Math.floor()方法取整,得到一个0到数组长度减1之间的随机整数。
4. 使用DOM操作将随机获取到的图片路径赋值给<img>标签的src属性。
下面是示例代码:
HTML代码:
```html
<img id="randomImg" src="" alt="Random Image">
```
JavaScript代码:
```javascript
// 图片路径数组
var imgPaths = [
"path/to/image1.jpg",
"path/to/image2.jpg",
"path/to/image3.jpg",
"path/to/image4.jpg",
"path/to/image5.jpg"
];
// 获取<img>标签
var imgEl = document.getElementById("randomImg");
// 生成随机数并获取随机图片路径
var randomIndex = Math.floor(Math.random() * imgPaths.length);
var randomImgPath = imgPaths[randomIndex];
// 设置<img>标签的src属性为随机图片路径
imgEl.src = randomImgPath;
```
每次执行上述代码,都会随机从数组中获取一张图片,并将其显示在<img>标签中。
阅读全文