每次 html 元素将类“活动”更改或将类添加到另一个

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>

我希望，每次比“活动”类更改幻灯片时，例如：“幻灯片 2 活动”、“幻灯片 3 活动”，在具有 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>