解决背景图片不随setInterval更改的问题,可以使用以下代码示例中的方法:
HTML代码:
CSS代码:
#container {
width: 100%;
height: 100%;
background-image: url('default.jpg');
background-repeat: no-repeat;
background-size: cover;
}
JavaScript代码:
var container = document.getElementById("container");
var imageIndex = 0;
var imageList = ["image1.jpg", "image2.jpg", "image3.jpg"];
function changeBackgroundImage() {
container.style.backgroundImage = "url('" + imageList[imageIndex] + "')";
imageIndex++;
if (imageIndex >= imageList.length) {
imageIndex = 0;
}
}
setInterval(changeBackgroundImage, 5000);
上述代码中,首先在HTML中创建了一个容器元素div,使用CSS设置容器的宽度、高度和背景图片的样式。在JavaScript中,定义了一个changeBackgroundImage函数,该函数用于更改容器的背景图片。在函数中,使用style属性的backgroundImage来更改容器的背景图片,根据imageIndex变量的值来选择要显示的图片。然后,定义了一个setInterval函数,每隔5000毫秒调用一次changeBackgroundImage函数,实现背景图片的自动更换。
上一篇:背景图片不适应
下一篇:背景图片不响应式的问题