求助：使用JavaScript和CSS实现网页背景每5秒自动切换

步骤1：定义多组渐变背景样式 #

在CSS中新增多组不同的渐变背景类，保留平滑过渡效果：

html,body{
    width: 100%;
    overflow-x: hidden !important;
    height: 100%;
    overflow-y: hidden !important;
}

#background{
    width: 100%;
    height: 100%;
    /* 默认初始背景 */
    background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
    /* 仅针对背景图设置过渡，比all更高效 */
    transition: background-image 5s ease;
    -webkit-transition: background-image 5s ease;
    -moz-transition: background-image 5s ease;
    -o-transition: background-image 5s ease;
    -ms-transition: background-image 5s ease;
}

/* 新增背景组合1 */
.bg-1{
    background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important;
}

/* 新增背景组合2 */
.bg-2{
    background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#dd8383c4), to(#12aaffd1), color-stop(70%, #50dfc5ab)) !important;
}

/* 新增背景组合3 */
.bg-3{
    background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#83dddcc4), to(#ff12d1d1), color-stop(70%, #df5050ab)) !important;
}

步骤2：编写自动切换逻辑 #

替换原有IntersectionObserver代码，用setInterval实现每5秒循环切换背景：

// 获取目标背景元素
const backgroundEl = document.getElementById('background');
// 存储所有背景类的数组
const bgClasses = ['bg-1', 'bg-2', 'bg-3'];
let currentIndex = 0;

// 定时切换函数，每5秒执行一次
setInterval(() => {
    // 移除当前所有背景类，避免样式冲突
    bgClasses.forEach(cls => backgroundEl.classList.remove(cls));
    // 循环切换到下一个背景类
    currentIndex = (currentIndex + 1) % bgClasses.length;
    backgroundEl.classList.add(bgClasses[currentIndex]);
}, 5000);

步骤3：HTML结构保持不变 #

无需修改原有HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="background">
</body>

关键说明 #

• 原有IntersectionObserver是监听元素视口交叉状态的逻辑，和自动切换需求无关，直接替换为定时逻辑即可。
• 把过渡效果限定为background-image，避免对其他属性产生不必要的过渡消耗。
• 通过数组循环索引实现无限轮播，每次切换前清空旧类，确保样式正确覆盖。

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