Удерживайте класс активным до тех пор, пока не будет активен последний класс внутри.

Question

У меня есть слайд-шоу, которое нужно щелкнуть, чтобы перейти к следующему изображению/видео. Однако я хотел бы сделать это автоматически, поэтому вам не нужны какие-либо действия пользователя.

страница выглядит folowing:

<article class="active"> 
    <li class="active"> Slide 1 </li> 
    <li> Slide 2 </li> 
    <li> Slide 3 </li> 
    <li> Slide 3 </li> 
</article> 

<article> 
    <li> Slide 1 </li> 
    <li> Slide 2 </li> 
    <li> Slide 3 </li> 
    <li> Slide 3 </li> 
</article> 

<article> 
    <li> Slide 1 </li> 
    <li> Slide 2 </li> 
    <li> Slide 3 </li> 
    <li> Slide 3 </li> 
</article> 

Когда статья активна, вы получите «представление» о Ли, которые там. Каждый раз, когда вы нажимаете следующую кнопку, следующий li становится активным. Когда он активен, вы увидите это только.

Что я хотел бы иметь:

Сделать первой статьи активным (как показано в коде). Тогда я хочу, например, автоматически сделать слайд 1 активным. Через 10 секунд я хочу, чтобы слайд 2 был активным. И через 30 секунд я хочу, чтобы слайд 3 был активным.

Когда он достигнет конца (в этом случае Слайд 3). Я хочу, чтобы он перешел к следующей статье и сделал эти слайды активными после x времени.

Я искал это в течение длительного времени. Однако я могу получить только элементы Li, которые будут активны после x секунд. Но я хочу решить, как долго я могу активировать каждый элемент Li. Это потому, что в некоторых слайдах есть фильмы, которые воспроизводятся. И некоторые из них - только изображения.

Answer 1

я написал что-то для вас

function autoSpin(){ 

    var slideShow = $("#mySlideshowOutdiv"); //set this yourself 
    var slides = $(slideShow).find("li"); 
    var activeSlide = $(slideShow).find("li.active") 

    var timer = 5000; //5 seconds 
    setTimeout(function({ 
     nextSlide(); 
    }, timer) 

    function nextSlide() { 
     if($(activeslide).nextAll().length == 0) { //If you're at the last "li" 
      setActive($(slides).eq(0)) 
     } else { // Else just use the next slide in line 
      setActive($(activeSlide).next("li")); 
     } 
    } 

    function setActive(slide){ 
     $(slideShow).find(".active").removeClass("active"); 
     $(slide).addClass("active"); 
    } 

} 

Answer 2

Сделано полностью рабочий exable только с полужирным в действии с чистым JavaScript:

<script> 
 

 
var interval = setInterval(function(){ 
 
\t console.log(1); 
 
\t var active = document.getElementsByClassName("active"); 
 
\t var parent = active[0].parentNode.parentNode.childNodes; 
 
\t 
 
\t var foundClass = false; 
 
\t var nextSlide = false; 
 
\t 
 
\t for(var j=0; j<parent.length; j++){ 
 
\t \t var childs = parent[j].childNodes; 
 
\t \t 
 
\t \t for(var i=0; i<childs.length; i++){ 
 
\t \t 
 
\t \t \t if(childs[i].nodeType==1 && foundClass){ 
 
\t \t \t \t childs[i].className = "active"; 
 
\t \t \t \t nextSlide = true; 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t 
 
\t \t \t if(childs[i].nodeType==1){ 
 
\t \t \t \t if(childs[i].getAttribute("class")=="active"){ 
 
\t \t \t \t \t childs[i].className = ""; 
 
\t \t \t \t \t foundClass = true; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } \t 
 
\t 
 
\t \t if(nextSlide){ 
 
\t \t \t break; 
 
\t \t } 
 
\t } 
 
\t 
 
\t if(!nextSlide){ 
 
\t \t clearInterval(interval); 
 
\t } 
 
\t \t 
 
}, 1000); 
 

 
</script> 
 
<style> 
 
.active { font-weight: bold; } 
 
</style> 
 

 
<article id="initShow"> 
 
    <li class="active"> Slide 1 </li> 
 
    <li> Slide 2 </li> 
 
    <li> Slide 3 </li> 
 
    <li> Slide 4 </li> 
 
</article> 
 

 
<article> 
 
    <li> Slide 5 </li> 
 
    <li> Slide 6 </li> 
 
    <li> Slide 7 </li> 
 
    <li> Slide 8 </li> 
 
</article> 
 

 
<article> 
 
    <li> Slide 9 </li> 
 
    <li> Slide 10 </li> 
 
    <li> Slide 11 </li> 
 
    <li> Slide 12 </li> 
 
</article>