Javascript 当滑动滑块处于活动状态时使用动画更改css-滑动滑块滑动

我有4张幻灯片，希望在幻灯片更改时使用流体动画更改背景颜色。每张幻灯片都有不同的颜色。我试过了，但加载时它只显示可用的颜色

$(document).ready(function(){
//Available
if($('#available').hasClass('swiper-slide-active')) {
    $('html').css('background', '#4caf50')
}
//In work
else if($('#inwork').hasClass('swiper-slide-active')) {
    $('html').css('background', '#FFC107')
}
//Pending
else if($('#pending').hasClass('swiper-slide-active')) {
    $('html').css('background', '#ced8d1')
}
//Done
else if($('#done').hasClass('swiper-slide-active')) {
    $('html').css('background', '#7a1e99')
}
})

---

添加背景的一种方法是将其放入伪元素中

您可以将颜色设置转换为CSS，这样当幻灯片获得swiper幻灯片活动类时，系统将更改伪元素中的颜色

在没有看到原始问题的完整代码的情况下，无法评估这是否会干扰其他任何内容，但请尝试将其添加到head中的样式元素中

.swiper-style-active::before {
  content:'';
  width:100vw;
  height:100vh;
  position:absolute;
  z-index:-1;
}

#available.swiper-slide-active::before {
  background: #4caf50;
}
#in-work.swiper-slide-active::before {
  background: #FFC107;
}
#pending.swiper-slide-active::before {
  background: #ced8d1;
}
#done.swiper-slide-active::before {
  background: #7a1e99;
}
  

---

你的代码只会被调用一次。也就是说：当页面被加载时，这就是为什么只有在

语句有效的情况下才会被调用。我需要更改整个主体的背景颜色，而不是活动的幻灯片。我已经将css颜色更改添加到伪元素，而不是它在我的试用版中工作的元素本身，但我不知道它是否会干扰你系统中的其他任何东西。