每當一個html元素將類「活動」更改或添加類到另一個

我有一個滑塊與自動播放。每5秒一次，不同類別的幻燈片放映中的不同元素將該類別視爲「活動」，您可以看到不同的幻燈片。和往常一樣。每當一個html元素將類「活動」更改或添加類到另一個

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

我想，每一個比「活動」類更改幻燈片如時間：「滑件積極的」，「滑件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 這些課程是障礙，但您可以理解。

來源

2017-06-19 Alexikakos

你的滑塊代碼在哪裏？請給我們[mcve]。 –

我使用joomla和滑塊是一個組件，滑塊的名稱是「智能滑塊3」，但我不認爲你需要代碼。我正在尋找一種解決方案，我想（java），在「topHeaderOfSite」上添加類，每次「活躍」類去deffernet幻燈片。 – Alexikakos

爲我工作的解決方案是[這裏]（https://stackoverflow.com/a/9609065/6477961） – Dimitra

以下可能會幫助你。使用關鍵幀動畫，但爲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>

來源

2017-06-19 14:35:56 Gerard

感謝您的回覆 css可以正常工作，如果幻燈片每5秒更換一次。但是當有人用箭頭改變幻燈片時（5秒之前），或者時間改變了，會發生什麼？我更喜歡java的解決方案。 – Alexikakos

感謝名單迪米特拉它工作正常！

來源

2017-06-21 07:13:00 Alexikakos

每當一個html元素將類「活動」更改或添加類到另一個

回答

相關問題