JavaScript实现落地页自动切换背景图功能失效如何排查

代码核心错误点 #

• document.getElementsByClassName返回的是匹配类名的元素集合（类数组对象），不是单个DOM元素，直接访问.style属性会失效，需要取下标[0]获取第一个匹配的.landing-page元素
• 随机数生成逻辑写在了setInterval外部，只会在页面加载时生成一次，后续定时器执行时永远使用同一个随机数，自然不会切换图片
• 末尾调用的changeImage()函数没有定义，会触发JS报错，阻断代码执行

修正后的完整JS代码 #

// 加[0]取元素集合的第一个匹配项，获取单个落地页DOM元素
var myBackground  = document.getElementsByClassName('landing-page')[0];

var myImages =[
    'img1.jpg',
    'img2.jpg',
    'img3.jpg',
    'img4.jpg',
];

// 把随机数生成逻辑放到定时器回调内部，每次执行都生成新的随机下标
setInterval(() => {
    var myRandomNumber = Math.floor(Math.random() * myImages.length); 
    myBackground.style.backgroundImage = 'url("img/' + myImages[myRandomNumber] + '")';
}, 1000); // 此处1000为切换间隔毫秒数，需要几秒切换就修改为对应数值，比如3秒则填3000

补充排查项 #

如果修改后仍不生效，可确认以下两点：

• CSS中.landing-page设置了有效宽高，且默认背景属性没有覆盖JS设置的backgroundImage
• 站点根目录下存在img文件夹，且文件夹内有对应名称的图片文件

内容的提问来源于stack exchange，提问作者MEDO bro