我需要在我制作好的网页上显示背景图片定时切换,请用js帮我实现,并用完整的html代码实现
时间: 2024-03-23 18:39:31 浏览: 12
好的,以下是实现定时切换背景图片的 HTML 和 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>定时切换背景图片</title>
<style type="text/css">
body {
background-image: url("1.jpg"); /* 初始背景图片 */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var images = ["1.jpg", "2.jpg", "3.jpg"]; // 背景图片数组
var currentIndex = 0; // 当前背景图片索引
// 切换背景图片函数
function changeBackground() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
document.body.style.backgroundImage = "url('" + images[currentIndex] + "')";
}
// 定时器每隔5秒调用一次切换背景图片函数
setInterval(changeBackground, 5000);
</script>
</body>
</html>
```
在这个示例中,我们定义了一个数组 `images`,包含三张背景图片的路径。在 `changeBackground()` 函数中,我们先将 `currentIndex` 加一,然后检查是否超出了数组的长度,如果超出了就将 `currentIndex` 重置为 0。最后,我们通过 JavaScript 动态修改 `body` 元素的 `backgroundImage` 属性,将背景图片切换为当前索引对应的图片。
在 HTML 中,我们通过 CSS 设置了 `body` 元素的样式,包括初始背景图片、背景图片的显示方式和尺寸,以及页面高度和边距。在 `body` 元素的结尾处,我们使用 `setInterval()` 函数设置了一个定时器,每隔 5 秒钟就调用一次 `changeBackground()` 函数,实现自动切换背景图片的效果。