javascript - 当 swiper 幻灯片处于活动状态时使用动画更改 css - Slider Swiper

Question

我有 4 张幻灯片，想在幻灯片更改时使用流畅的动画更改背景颜色。每张幻灯片都有不同的颜色。我试过这个，但它只#available在加载时显示颜色。

$(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')
}
})

标签： javascriptjquerycssif-statement

Answer 1

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

您可以将颜色设置转换为 CSS，以便系统在幻灯片获取 swiper-slide-active 类时更改伪元素中的颜色。

如果没有看到原始问题的完整代码，则无法评估这是否会干扰其他任何事情，但请尝试将其添加到 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;
}