gpt4 book ai didi

javascript - 保持类(class)活跃,直到里面的最后一个类活跃

转载 作者:行者123 更新时间:2023-11-28 16:02:17 27 4
gpt4 key购买 nike

我有一个幻灯片,需要单击它才能转到下一个图像/视频。但是,我想自动执行此操作,因此不需要任何用户事件。

页面如下所示:

<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 的“演示文稿”。每次单击下一步按钮时,下一个 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>

关于javascript - 保持类(class)活跃,直到里面的最后一个类活跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39897092/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com