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()作为背景图片。

我还在函数之外移动了变量定义，因为它们不需要在每次调用时重新定义。

＆＃13;
＆＃13;
var el = document.getElementById("belowNav"), backImage = [ "http://lorempixel.com/400/150/abstract/1/", "http://lorempixel.com/400/150/abstract/2/", "http://lorempixel.com/400/150/abstract/3/" ], imageIndex = 0; function changeImage() { el.style.backgroundImage = "url('" + backImage[imageIndex] + "')"; imageIndex++; if (imageIndex >= backImage.length) { imageIndex = 0; } } setInterval(changeImage, 2000); changeImage();
＆＃13;
div#belowNav { width: 400px; height: 150px; }
＆＃13;
<div id="belowNav"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

几乎就在那里！ CSS背景属性包含在url（＆＃39;＆＃39;）包装中，因此这一行：

el.style.backgroundImage = "%resource("+backImage[currentImage]+")%";

应该是

el.style.backgroundImage = "url('"+backImage[currentImage]+"')";

我不确定％资源是指什么，所以我删除了这些引用。感谢imnancysun首先写这个！

使用Javascript更改div的背景图像

2 个答案: