使用JavaScript更改背景图像图像以进行图像幻灯片

Change backgroundImage with javascript for image slideshow.

本文关键字：图像 幻灯片 背景 JavaScript 使用      更新时间：2023-09-26

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

主.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改变样式的基本原则，它适用于静态图像，所以我的猜测是我在循环中做错了什么。

谢谢

更改以下内容：

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

和

loopTimer = setTimeout(loop,1000);

看看，如果有帮助。

尝试将设置超时更改为以下内容

loopTimer = setTimeout('loop', 1000);
相关文章：