Javascript 如何将类添加到下一个DIV并使用动态项数淡出当前DIV-多个实例

我想知道是否有一种方法可以为文本div创建一个可伸缩的（主要是）CSS幻灯片-无图像

我有这个当前的HTML结构：

1.1
幻灯片1.1


1.2
幻灯片1.2


1.3
幻灯片1.3


2.1
幻灯片2.1


2.2
幻灯片2.2


2.3
幻灯片2.3


3.1
幻灯片3.1


3.2
幻灯片3.2


3.3
幻灯片3.3

但是，幻灯片上的项目数量将根据发布的通知数量而有所不同

我有当前的CSS：

.mb面板容器{
宽度：100vw；
页边顶部：1px；
文本对齐：居中；
}
.mb面板部分{
宽度：计算（（100vw-3px）/3）；
浮动：左；
右边距：1px；
}
.mb-panel-section.mb-slider{
高度：计算（100vh-（4em+1.75em+2em+5em））；
}
.mb面板部分.mb面板{
线高：1米；
填充：1em；
身高：100%；
宽度：100%；
}
.mb-panel-section.mb-slider.mb面板{
填充物：5em 2em 3em；
不透明度：0；
过渡：线性；
}
.mb panel container.mb panel section.mb-panel.active{opacity:1；}

还有Javascript：

$（文档）.ready（函数（）{
变量项=$（'.mb面板'）；
var currentItem=items.filter（'.active'）；
setInterval（函数（）{
var nextItem=currentItem.next（）；
currentItem.removeClass（“活动”）；
如果（下一米长度）{
currentItem=nextItem.addClass（'active'）；
}否则{
//如果你想让它循环
currentItem=items.first（）.addClass（'active'）；
}
}, 5000);
}); 

然而，虽然它无限期地循环通过第一个面板，但其他两个不会循环，而是在最后一个面板上结束

---

我不完全确定在哪里修改代码，也不想为每个面板部分复制JS代码。

我相信您要查找的内容比编辑所有这些项目更简单。一个纯粹的CSS和JS解决方案，没有JQuery，应该是这样的

const allSlides = document.querySelectorAll(".mb-slide");
const active = allSlides.filter(slide => slide.classList.contains("active"))[0];
const activeIndex = allSlides.findIndex(slide => slide === active);
const nextItem = allSlides[activeIndex + 1];
active.classList.remove("active");
nextItem.classList.add("active");

同时，您可以从第一张幻灯片开始，它的类为

.active

。在CSS中，您可以设置如下内容：

.mb-slide{
 // all your other CSS
 opacity: 0;
 transition: opacity 0.3s linear;
 }
.active{
opacity: 1;
transition: opacity 0.3s linear;
}

---

如果以后有人在寻找解决方案，以下是我所做的：

$(document).ready(function() {
    var items       = $(".mb-panel"),
        currentItem = items.filter(".active");

    window.setInterval( function() {
        var nextItem = currentItem.next();
        currentItem.removeClass("active");

        if( nextItem.length ) {
            currentItem = nextItem.addClass("active");
        } else {
            currentItem = items.first().addClass("active");
        }
    }, 5000);
});

---

本质上是将一个类

active

添加到div中的下一项中，然后将其删除，并将其添加到下一项中，依此类推。使其无限扩展

谢谢，我更新了这个问题，因为有多个幻灯片实例要运行，并将您的代码更新为jQuery