html实现图片自动播放效果代码
时间: 2023-12-29 13:06:22 浏览: 37
以下是一个简单的 HTML 代码,可以实现图片自动播放效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片自动播放</title>
<script>
var i = 0;
var images = [];
var time = 3000; // 图片切换时间间隔,单位为毫秒
// 图片列表
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
// 切换图片函数
function changeImg() {
document.slide.src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
</script>
</head>
<body onload="changeImg()">
<img name="slide" width="500" height="300">
</body>
</html>
```
在上面的代码中,我们使用了 `images` 数组来存储图片列表,使用 `changeImg()` 函数来切换图片,并使用 `setTimeout()` 函数来实现自动切换效果。在页面加载完成时,我们使用 `onload` 事件来调用 `changeImg()` 函数,从而开始自动播放图片。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)