我想在活动幻灯片中添加 "is-active" 类，在出现的幻灯片中添加"is-out"类

Question

我有以下HTML文档，它是SlideShow：

<div class="ReferencesCarousel">
<div class="ReferencesCard"></div>
<div class="ReferencesCard"></div>
<div class="ReferencesCard"></div>
</div>

与以下代码相关的javascript代码如下：

var ReferenceIndex = 0;
showReferences();
function showReferences() {
var i;
var References = document.getElementsByClassName("ReferencesCard");
for (i = 0; i < References.length; i++) {
References[i].classList.remove('is-active');
}
ReferenceIndex++;
if (ReferenceIndex > References.length) {ReferenceIndex = 1}
References[ReferenceIndex-1].classList.add('is-active');
setTimeout(showReferences, 2000);
}

我想做的是添加"；是out"；在即将推出的幻灯片中上课。

这意味着每个类包含"；是活动的"；更改为"；是out"；以及"；是out"；类将添加到下一张幻灯片中。

另一件事：is out类应该持续1秒，并且应该被删除。

Answer 1

您可以使用querySelector查找具有.isActive类的节点。然后，您可以将其从发生它的节点中删除。

它看起来像这样：

let isActive = document.querySelector('.is-active')
if (isActive !== null){
isActive.classList.remove('is-active')

setInterval方法将处理您的时间问题。它将在您确定的一段时间后运行一个函数。点击此处阅读更多信息。

您可以设置i=0，而不是像上面所做的那样运行for循环。然后在您的setInterval函数中，有：

i++
References[i].classList.add('is-active')

所有这些加在一起将1(搜索具有"is active"类的任何节点2(将其删除，3(将"is active"类添加到列表中索引值等于i的节点中。