如何将 class 添加到下一个 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");

与此同时，您将从第一张幻灯片的 class 为 .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);
});

本质上是在div中的下一项添加一个class active然后删除，再添加到下一项，以此类推。使其无限扩展。

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

How to add class to the next DIV and fade out the current with dynamic number of items - multiple instances

html

javascript

css

jquery

slideshow