javascript - 如何让这个多幻灯片面板无限循环

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>