Chaque fois qu'un élément html prend la classe "active" change ou ajoute une classe à un autre

Question

J'ai un curseur avec autoplay. Toutes les 5 secondes un élément différent du diaporama avec classe différente prend la classe "active" et vous pouvez voir la diapositive différente. comme d'habitude.

<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> 

Je veux, à chaque fois que le changement de classe "active" slide par exemple: "slide2 actif", "slide3 actif", sur l'élément class = "topHeaderOfSite" ajouter la classe d'élément coulissant.

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

je veux que cela change l'arrière-plan de couleur "topHeaderOfSite", slide defferent, la couleur defferent.

J'essaie par ce moi-même, mais son travail que pour la première diapositive, si je change diapositive et aller active « .slide2' , le » .topHeaderOfSite « continuent toujours la classe » .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"); 
} 

Vous pouvez vérifier en direct dans le site http://www.zaxaropolis.gr/nextgen/index.php Les classes sont defferents mais vous pouvez comprendre.

Answer 1

Ce qui suit pourrait vous être utile. Utilisation d'animations par images clés mais adaptées pour 3 diapositives.

.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>

Answer 2

Thanx Dimitra il fonctionne très bien !!!