javascript - 使用 Javascript 更改 div 的背景图像

Question

因此，我一直在努力使用我的书籍来学习我的 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

Answer 1

我对您的代码做了一些修改。

主要是，您的代码在每次调用 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>