用html写一个简单的背景图切换
时间: 2023-08-02 21:05:50 浏览: 36
好的,以下是一个简单的背景图切换的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>背景图切换</title>
<style>
body {
background-image: url("bg1.jpg"); /* 初始背景图 */
background-size: cover;
background-position: center;
transition: background-image 0.5s ease-in-out; /* 背景图切换动画 */
}
</style>
</head>
<body>
<script>
var images = ["bg2.jpg", "bg3.jpg", "bg4.jpg"]; // 背景图数组
var index = 1; // 初始背景图索引
var intervalID = setInterval(changeBackground, 5000); // 每5秒切换一次背景图
function changeBackground() {
document.body.style.backgroundImage = "url('" + images[index] + "')"; // 切换背景图
index = (index + 1) % images.length; // 更新背景图索引
}
</script>
</body>
</html>
```
这个代码会初始显示 `bg1.jpg` 这张背景图,然后每5秒自动切换到数组中的下一张背景图(`bg2.jpg`、`bg3.jpg`、`bg4.jpg`),循环播放。切换背景图时会有一个简单的淡入淡出动画。