javascript - 一次显示 4 个 div 的无限循环

Question

我想创建类似于幻灯片放映的东西，每当单击按钮 #more-projects 时，将显示 4 个 div，当再次单击时，这些 div 会隐藏，接下来的 4 个 div 会显示，这需要无限循环并应用于任意数量的 div。

在这种情况下，我在 div“#container”中有 6 个类为 .thumbnail-cnt 的 div，当我单击 #more-projects 时，我想要这些 div 中的前 4 个要显示，div 1、2、3、4。当再次单击 #more-projects 时，循环中接下来的 4 个 div 将显示为 5、6、1、2。再次单击，将显示 div 1、2、3、4。如何选择下一个索引并使函数无限迭代元素？

<div id="container">
    <div class="thumbnail-cnt" data-num="1">1
    </div>
    <div class="thumbnail-cnt" data-num="2">2
    </div>
    <div class="thumbnail-cnt" data-num="3">3
    </div>
    <div class="thumbnail-cnt" data-num="4">4
    </div>
    <div class="thumbnail-cnt" data-num="5">5
    </div>
    <div class="thumbnail-cnt" data-num="6">6
    </div>
</div>

<button id="more-projects" > Next
</button>

到目前为止我的 JS 是

var startIndex = 0;

$('#more-projects').on("click", function() {
    var endIndex = startIndex + 4;
    var nextIndex = endIndex +1;
    $('#container .thumbnail-cnt').slice(startIndex, endIndex).addClass('visible');
    var startIndex = nextIndex;
}

CSS

.thumbnail-cnt {
    display: none;
}
.visible {
    display: block;
}

Answer 1

解决方案可以基于:

• 将最大可见元素数的初始值保存为你的div的数据值
• 将起始索引保存为另一个数据值

所以，初始值为:

<div id="container" data-start-index="0" data-max-visible-length="4">

在点击处理程序中计算结束索引位置。如果超过最大值，则需要从头开始。将这个新值保存为新的起始索引。

$('#more-projects').on("click", function() {
    var startIndex = $('#container').data('startIndex');
    var maxVisibleLength = $('#container').data('maxVisibleLength');
    var endIndex = startIndex + maxVisibleLength;
    var itemCounts = $('#container .thumbnail-cnt').length;
    $('#container .thumbnail-cnt.visible').removeClass('visible');
    if (endIndex > itemCounts) {
        endIndex = endIndex - itemCounts;
        $('#container .thumbnail-cnt').slice(startIndex).addClass('visible');
        $('#container .thumbnail-cnt').slice(0, endIndex).addClass('visible');
    } else {
        $('#container .thumbnail-cnt').slice(startIndex, endIndex).addClass('visible');
    }
    $('#container').data('startIndex', endIndex);
});

.thumbnail-cnt {
    display: none;
}
.visible {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="container" data-start-index="0" data-max-visible-length="4">
    <div class="thumbnail-cnt" data-num="1">1
    </div>
    <div class="thumbnail-cnt" data-num="2">2
    </div>
    <div class="thumbnail-cnt" data-num="3">3
    </div>
    <div class="thumbnail-cnt" data-num="4">4
    </div>
    <div class="thumbnail-cnt" data-num="5">5
    </div>
    <div class="thumbnail-cnt" data-num="6">6
    </div>
</div>

<button id="more-projects" > Next
</button>