用js写一段程序实现图片自动随机却换
时间: 2023-12-24 20:05:00 浏览: 70
好的,以下是用 JavaScript 实现图片自动随机切换的代码:
HTML 代码:
```html
<div class="image-container">
<img id="image" src="" alt="">
</div>
```
JavaScript 代码:
```javascript
// 定义图片数组
const images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
];
// 获取图片容器和图片元素
const imageContainer = document.querySelector('.image-container');
const image = document.getElementById('image');
// 定义切换图片的函数
function changeImage() {
// 随机选择一张图片
const randomIndex = Math.floor(Math.random() * images.length);
const randomImage = images[randomIndex];
// 设置图片的 src 属性
image.src = randomImage;
}
// 初始加载一张图片
changeImage();
// 每隔 3 秒切换一次图片
setInterval(changeImage, 3000);
```
该程序定义了一个图片数组 `images`,包含了多张图片的文件名。然后获取了图片容器和图片元素,并定义了一个 `changeImage()` 函数,用于随机选择一张图片并设置为图片元素的 `src` 属性。最后在页面加载时调用一次 `changeImage()` 函数,然后每隔 3 秒钟调用一次,实现图片的自动随机切换。
阅读全文