因此,我一直在努力使用我的书籍来学习我的 Javascript 技能,但我终于找到了一些我似乎无法仅靠书籍拼凑起来的东西。我想做的是每隔几秒更改一个 id 为 belowNav 的 div 的 css 背景图像 下面是我的代码,它在控制台中没有返回任何错误,但实际上没有运行(字面上没有做任何事情) 如果有人拥有比我更多的 JS 技能,我将不胜感激 :)
setInterval(function changeImage(){
var el = document.getElementById("belowNav");
var currentImage = 0;
var backImage = ["img2.png",
"IMG_3880.JPG",
"IMG_6629.JPG",
"IMG_6552.JPG",
"IMG_4090.JPG",
"IMG_0005.JPG",
"IMG_0041.JPG",
"IMG_6544.JPG",
"IMG_6628.JPG",
"IMG_5168.JPG",
"coffee.jpg"]
var lastImage = backImage.length+1;
for (var i = 0; i < 10; i++); {
currentImage = i;
el.style.backgroundImage = "%resource("+backImage[currentImage]+")%";
if(i == 10){
i = 0
}//end if
}//end for
}, 2000);//end Function
最佳答案
我对您的代码做了一些修改。
主要是,您的代码在每次调用 changeImage
函数时从 0 循环到 10。您似乎只想每次调用一次 推进图像索引,以便将背景更改为数组中的下一个图像。
根据 CSS background-image
,我使用 url()
作为背景图像.
我还将变量定义移到了函数之外,因为它们不需要在每次调用时重新定义。
var el = document.getElementById("belowNav"),
backImage = [
"https://via.placeholder.com/400x150?text=One",
"https://via.placeholder.com/400x150?text=Two",
"https://via.placeholder.com/400x150?text=Three"
],
imageIndex = 0;
function changeImage() {
el.style.backgroundImage = "url('" + backImage[imageIndex] + "')";
imageIndex++;
if (imageIndex >= backImage.length) {
imageIndex = 0;
}
}
setInterval(changeImage, 2000);
changeImage();
div#belowNav {
width: 400px;
height: 150px;
}
<div id="belowNav"></div>
关于javascript - 使用 Javascript 更改 div 的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33440888/