javascript - 保持类活跃，直到内部的最后一场活跃

我有一个幻灯片，需要单击以转到下一个图像/视频。
但是，我想自动进行此操作，因此它不需要任何用户活动。

该页面如下所示：

<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倍的时间后激活那些幻灯片。

我已经搜索了很长时间了。但是，我只能在经过x秒钟的时间后才能激活Li元素。但是我想决定我可以使每个Li元素活跃多长时间。这是因为某些幻灯片具有正在播放的电影。有些只是图片。

最佳答案

通过使用纯JavaScript进行加粗操作，使完全可工作成为可能：

<script>

var interval = setInterval(function(){
	console.log(1);
	var active = document.getElementsByClassName("active");
	var parent = active[0].parentNode.parentNode.childNodes;

	var foundClass = false;
	var nextSlide = false;

	for(var j=0; j<parent.length; j++){
		var childs = parent[j].childNodes;

		for(var i=0; i<childs.length; i++){

			if(childs[i].nodeType==1 && foundClass){
				childs[i].className = "active";
				nextSlide = true;
				break;
			}

			if(childs[i].nodeType==1){
				if(childs[i].getAttribute("class")=="active"){
					childs[i].className = "";
					foundClass = true;
				}
			}
		}

		if(nextSlide){
			break;
		}
	}

	if(!nextSlide){
		clearInterval(interval);
	}

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