如何实现网页section背景图每3秒交替切换？

1. 调整CSS基础样式 #

先修正选择器（通过ID定位更精准），确保section的显示基础达标，还可添加过渡动画让切换更平滑：

#sec1 {
    background-image: url('sources/img/11-5.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    /* 必须设置高度，否则section会因内容高度不足无法显示背景图 */
    min-height: 500px;
    /* 可选：添加背景图切换过渡动画 */
    transition: background-image 0.5s ease-in-out;
}

2. 插入JavaScript切换逻辑 #

在HTML的</body>闭合标签前添加以下代码，实现每3秒交替切换两张背景图：

// 获取目标section元素
const targetSection = document.getElementById('sec1');
// 定义要切换的两张图片路径（注意和本地文件结构匹配）
const bgImages = [
    'sources/img/11-5.jpg',
    'sources/img/11-4.jpg'
];
// 当前显示的图片索引
let currentImgIndex = 0;

// 切换背景图的函数
function toggleBackground() {
    // 循环切换索引：0→1→0→1...
    currentImgIndex = (currentImgIndex + 1) % bgImages.length;
    // 更新元素的背景图样式
    targetSection.style.backgroundImage = `url('${bgImages[currentImgIndex]}')`;
}

// 设置定时器，每3000毫秒（3秒）执行一次切换函数
setInterval(toggleBackground, 3000);

关键注意事项 #

• 确认图片路径正确：本地sources/img文件夹下必须存在11-5.jpg和11-4.jpg，注意文件名大小写（比如原CSS中的.JPG和需求中的.jpg要统一）
• 如果不需要过渡动画，可删除CSS中的transition属性
• 若section已有高度设置，可去掉CSS中的min-height属性

内容的提问来源于stack exchange，提问作者Albert Ruiz