保持课堂活跃，直到最后一节课开始活动

Keep class active untill last class inside is active

本文关键字：一节课 开始 活动 直到最后 课堂 活跃      更新时间：2023-09-26

我有一个幻灯片，需要点击才能转到下一个图像/视频。然而，我想让它自动，所以它不需要任何用户活动。

页面如下所示:

<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的"演示"。每次单击next按钮时，下一个li将变得活跃。当它激活时，你只会看到

我想要什么:

使第一篇文章处于活动状态(如代码所示)。然后我想要例如自动使幻灯片1激活。10秒后，我想要幻灯片2激活。30秒后，我想让幻灯片3激活。

到达末尾时(本例中为幻灯片3)。我想让它转到下一篇文章，并在x时间后激活这些幻灯片。

我一直在寻找这个很长时间了。然而，我只能让Li元素在x秒后激活。但我想决定我能让每个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>

我为你写了一些东西

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");
    }
}
相关文章：