Div 动态显示时间的幻灯片

Question

我正在尝试显示 div 的幻灯片，但每个 div 的显示时间应该不同。显示时间应由数据属性（持续时间）控制。我尝试使用“setTimeout”进行此操作，但出现错误：“Uncaught RangeError: Maximum call stack size exceeded”，它将在第三张幻灯片处停止。这是我的代码：

var active = document.querySelector('#cycler .active');

function changeTime() {
    t = active.dataset.duration * 1000;
}

function cycleDivs() {
    active = document.querySelector('#cycler .active');
    var next = (active.nextElementSibling) ? active.nextElementSibling : document.querySelector('#cycler div:first-child');

    function swapDivs() {
        active.classList.remove('active');
        next.classList.add('active');
    }
    swapDivs();
    changeTime();
    setTimeout(cycleDivs(), t);
}
changeTime();
setTimeout(cycleDivs(), t);

#cycler :not(.active) {
        display: none;
}

<div id="cycler">
    <div class="slide active" data-duration="6">6</div>
    <div class="slide" data-duration="6">1</div>
    <div class="slide" data-duration="6">2</div>
    <div class="slide" data-duration="6">3</div>
    <div class="slide" data-duration="6">4</div>
    <div class="slide" data-duration="6">5</div>
</div>

Answer 1

我认为 setTimeout 需要引用该函数，例如 setTimeout(cycleDivs,t); 才能按预期工作。

Div 动态显示时间的幻灯片

Div Slideshow with dynamic display time

html

javascript

duration

slideshow

custom-data-attribute