html随机显示图片
时间: 2023-07-25 11:06:32 浏览: 546
可以使用JavaScript来实现HTML随机显示图片的效果。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机显示图片</title>
</head>
<body>
<img id="random-image" src="">
<script>
var images = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"]; // 图片数组
var randomIndex = Math.floor(Math.random() * images.length); // 随机生成一个索引
var randomImage = images[randomIndex]; // 获取随机图片的路径
document.getElementById("random-image").src = randomImage; // 在页面中显示随机图片
</script>
</body>
</html>
```
你可以将上述代码保存为一个 HTML 文件并在浏览器中打开,就可以看到随机显示图片的效果。注意,需要将图片放置在同一目录下,并将其文件名更新到 `images` 数组中。
相关问题
完整的html随机显示图片代码
以下是一个简单的随机显示图片的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机显示图片</title>
<script type="text/javascript">
function randomImage() {
var images = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg"
];
var randomNumber = Math.floor(Math.random() * images.length);
document.getElementById("randomImage").src = images[randomNumber];
}
</script>
</head>
<body>
<h1>随机显示图片</h1>
<button onclick="randomImage()">点击显示随机图片</button>
<br><br>
<img id="randomImage" src="" alt="随机图片">
</body>
</html>
```
在这个代码中,我们首先定义了一个包含多个图片文件名的数组 `images`。当用户点击按钮时,`randomImage` 函数会被触发,它会生成一个随机数,并使用这个随机数来从 `images` 数组中获取一个随机的图片文件名。最后,它将这个文件名作为 `src` 属性赋值给 `<img>` 标签,从而显示这个图片。
html随机显示图片,不把图片放在一个数组里的方法
你可以使用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>标签中。