每次 html 元素获取类时"active"更改类或将类添加到另一个类

Question

我有一个带自动播放功能的滑块。 每隔 5 秒，来自不同类的幻灯片的不同元素将类设置为"活动"，您可以看到不同的幻灯片。像往常一样。

<style>
.topHeaderOfSite.slide1{background-color:red;}
.topHeaderOfSite.slide2{background-color:green;}
.topHeaderOfSite.slide3{background-color:yellow;}
</style>
<div class="topHeaderOfSite">
//some code here...
</div>
<div class="slides">
<div class="slide1 active">
//img ...
</div>
<div class="slide2">
//img ...
</div>
<div class="slide3">
//img ...
</div>
</div>

我希望，每次比"活动"类更改幻灯片时，例如："slide2 active"，"slide3 active"，在带有 class="topHeaderOfSite" 的元素上添加幻灯片元素的类。

<div class="topHeaderOfSite slide1">
//some code here...
</div>

我希望它更改"topHeaderOfSite"背景颜色，不同的幻灯片，不同的颜色。

我自己尝试这个，但它仅适用于第一张幻灯片，如果我更改幻灯片并激活转到".slide2"，".topHeaderOfSite"仍然继续具有类".topHeaderOfSite.slide1">

jQuery(document).ready(addClassToTop);
function addClassToTop() {
if($('.slide1').hasClass("active")){
$('.topHeaderOfSite').addClass("slide1");
}else if($('.slide2').hasClass("active")){
$('.topHeaderOfSite').addClass("slide2");
}else if($('.slide3').hasClass("active")){
$('.topHeaderOfSite').addClass("slide3");
}else{$('.topHeaderOfSite').addClass("nothingHappen");
}

您可以在现场查看实时 http://www.zaxaropolis.gr/nextgen/index.php 这些类是不同的，但你可以理解。

Answer 1

以下内容可能会对您有所帮助。使用关键帧动画，但为 3 张幻灯片量身定制。

.topHeaderOfSite {
height: 50px;
width: 100%;
animation: tops 15s infinite;
}
@keyframes tops {
0%, 100%
{
background: #FF0000
}
33.33% {
background: #333
}
66.66% {
background: #666
}
}
.slides {
position: relative;
}
.slides div {
position: absolute;
opacity: 0;
animation: FadeIn 15s infinite;
}
@keyframes FadeIn { 
0% { opacity:0; transform:opacity(0);}
30% {opacity:1; transform:opacity(1);}
33.33% { transform:opacity(0); }
}
.slides div:nth-child(1){ animation-delay: 0s }
.slides div:nth-child(2){ animation-delay: 5s }
.slides div:nth-child(3){ animation-delay: 10s }

<div class="topHeaderOfSite"></div>
<div class="slides">
<div>
<img src="http://placehold.it/200/333333">
</div>
<div>
<img src="http://placehold.it/200/666666">
</div>
<div>
<img src="http://placehold.it/200/FF0000">
</div>
</div>