使用javascript更改backgroundImage以进行图像幻灯片放映。

Question

我正在尝试根据它的id更改div的背景图像，然后制作带有几个图像的幻灯片。我可以用javascript更改背景，但很难弄清楚为什么我的循环不起作用。

main.js

var spotlight = document.getElementById('spotlight');
var pics = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var totalPics = pics.length;
var i = 0;
function loop() {
    if(i > (totalPics - 1)) {
        i = 0;
    }
    spotlight.style.backgroundImage="url(/images/posts/'+pics[i]+')";
    i++;
    loopTimer = setTimeout('loop()',1000);
}
loop();

我正在使用sass，但由于javascript是客户端，这应该不会有任何不同我猜？我在循环中做错了什么？ 我已经遵循w3Schools中使用javascript更改样式的基本原则，并且它使用静态图像，所以我的猜测是我在循环中做错了。

谢谢

Answer 1

尝试将setTimeout更改为以下

loopTimer = setTimeout('loop', 1000);

Answer 2

改变这个：

spotlight.style.backgroundImage="url(/images/posts/" + pics[i]+ ")";

和

loopTimer = setTimeout(loop,1000);

看，如果有帮助。