如何将类添加到下一个DIV中，并使用动态数量的项(多个实例)淡出当前DIV

Question

我想知道是否有一种方法可以为文本div创建一个可扩展的(主要是(CSS幻灯片-没有图像。

我有这个当前的HTML结构：

<div class="mb-panel-container cf">
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>1.1</h1>
<p>slide 1.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>1.2</h1>
<p>slide 1.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>1.3</h1>
<p>slide 1.3</p>
<p class="datetime"></p>
</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>2.1</h1>
<p>slide 2.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>2.2</h1>
<p>slide 2.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>2.3</h1>
<p>slide 2.3</p>
<p class="datetime"></p>
</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>3.1</h1>
<p>slide 3.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>3.2</h1>
<p>slide 3.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>3.3</h1>
<p>slide 3.3</p>
<p class="datetime"></p>
</div>
</div>
</div>

但幻灯片的项目数量会有所不同，具体取决于发出的通知数量。

我有当前的CSS:

.mb-panel-container {
width: 100vw;
margin-top: 1px;
text-align: center;
}
.mb-panel-section {
width: calc( ( 100vw - 3px ) / 3 );
float: left;
margin-right: 1px;
}
.mb-panel-section.mb-slider {
height: calc( 100vh - (4em + 1.75em + 2em + 5em) );
}
.mb-panel-section .mb-panel {
line-height: 1em;
padding: 1em;
height: 100%;
width: 100%;
}
.mb-panel-section.mb-slider .mb-panel {
padding: 5em 2em 3em;
opacity: 0;
transition: opacity 2s linear;
}
.mb-panel-container .mb-panel-section .mb-panel.active { opacity: 1; }

和Javascript：

$(document).ready(function() {
var items = $('.mb-panel');
var currentItem = items.filter('.active');
window.setInterval( function(){
var nextItem = currentItem.next();
currentItem.removeClass('active');
if ( nextItem.length ) {
currentItem = nextItem.addClass('active');
} else {
// If you want it to loop around
currentItem = items.first().addClass('active');
}
}, 5000);
}); 

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

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

Answer 1

我相信您想要的比编辑所有这些项更简单。一个纯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;
}

Answer 2

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

$(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中的下一个项，然后删除它，再将它添加到下一个项目，依此类推。使其无限扩展。