如何使此多幻灯片面板无限循环

Question

我有三个面板，其中只有文本或文本和图像，可以无限循环，并且可以从1-1000张幻灯片进行缩放。

我有以下标记：

<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>

和以下脚本：

<script>
    $(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);
    });
</script>

不幸的是，我最终得到这样的东西：

从本质上讲，面板的第一次运行是有效的，但是当到达循环时，它将停止除第1列以外的其他面板。我将对此进行开放，以允许用户根据需要在每个面板上添加尽可能多的通知，但是要求它在到达最后一张幻灯片时循环回到每一列的开头。

Answer 1

您必须选择确切的元素.eq(index)并更改索引，具体取决于-如果达到最大允许长度。

$('.mb-slider').each(function(){ // looping for each slider block
  let panels = $(this).find('.mb-panel'); // collecting current slides
  let len = panels.length;
  let index = 0;
  
  setTimeout(function loop(){
    panels.eq(index).removeClass('active');
    index = (index == len - 1) ? 0 : index + 1; // Google ? Ternary operator  
    panels.eq(index).addClass('active');
    
    setTimeout(loop, 1000);
  }, 1000);
});

.mb-panel {
  display: none;
  border: 2px solid orange;
  margin: 5px;
  padding: 5px;
}

.mb-panel.active { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="mb-panel-container cf">
  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">1-1</div>
    <div class="mb-panel">1-2</div>
    <div class="mb-panel">1-3</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">2-1</div>
    <div class="mb-panel">2-2</div>
    <div class="mb-panel">2-3</div>
    <div class="mb-panel">2-4</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">3-1</div>
    <div class="mb-panel">3-2</div>
    <div class="mb-panel">3-3</div>
    <div class="mb-panel">3-4</div>
    <div class="mb-panel">3-5</div>
  </div>
</div>

我使用了自调用setTimeout链，因为那样就可以了。在这里您也可以使用setInterval。但是在某些情况下，这是有道理的-不要重复调用函数，而上一步尚未完成。

翻译成本地JS（找到10个差异：D）：

let slider = document.querySelectorAll('.mb-slider');

for( let i = 0; i < slider.length; i++ ){  
  let panels = slider[i].querySelectorAll('.mb-panel');  
  let len = panels.length;
  let index = 0;
  
  setTimeout(function loop(){
    panels[index].classList.remove('active');
    index = (index == len - 1) ? 0 : index + 1;
    panels[index].classList.add('active');
    
    setTimeout(loop, 1000);
  }, 1000);
}

.mb-panel {
  display: none;
  border: 2px solid orange;
  margin: 5px;
  padding: 5px;
}

.mb-panel.active { display: block; }

<div class="mb-panel-container cf">
  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">1-1</div>
    <div class="mb-panel">1-2</div>
    <div class="mb-panel">1-3</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">2-1</div>
    <div class="mb-panel">2-2</div>
    <div class="mb-panel">2-3</div>
    <div class="mb-panel">2-4</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">3-1</div>
    <div class="mb-panel">3-2</div>
    <div class="mb-panel">3-3</div>
    <div class="mb-panel">3-4</div>
    <div class="mb-panel">3-5</div>
  </div>
</div>