实现数组无限循环切片打印：UP/DOWN按钮循环展示7个元素

我来帮你搞定这个无限循环切片的需求！你的代码目前的问题是，当down或up累加超过数组长度后，slice就无法正确获取元素了。我们可以通过取模运算来处理循环逻辑，让切片的起始位置始终在数组的有效范围内循环。

核心思路 #

• 对于DOWN按钮（向后循环）：每次计算起始位置时，用当前偏移量对数组长度取模，这样当偏移量超过数组长度时，会自动回到起始位置。如果起始位置加7超过数组长度，就把数组末尾的元素和开头的元素拼接起来，保证每次都能取到7个元素。
• 对于UP按钮（向前循环）：维护一个起始索引，每次向前移动7个位置，当索引变为负数时，通过加上数组长度再取模的方式，让它回到数组末尾的位置，同样处理跨数组边界的拼接情况。

修改后的完整代码 #

var numberOfElement = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
var howManyelement = 7;
var arrLength = numberOfElement.length;

// DOWN按钮逻辑：向后循环取7个元素
var downOffset = 0;
$('.down').click(function(){
    var start = downOffset % arrLength;
    var result;
    if (start + howManyelement > arrLength) {
        // 跨数组边界，拼接末尾和开头的元素
        result = numberOfElement.slice(start).concat(numberOfElement.slice(0, start + howManyelement - arrLength));
    } else {
        result = numberOfElement.slice(start, start + howManyelement);
    }
    console.log(result);
    downOffset += howManyelement;
});

// UP按钮逻辑：向前循环取7个元素
// 初始起始位置：从数组末尾往前数7个的起始索引
var upStart = arrLength - howManyelement;
$('.up').click(function(){
    var result;
    if (upStart + howManyelement > arrLength) {
        result = numberOfElement.slice(upStart).concat(numberOfElement.slice(0, upStart + howManyelement - arrLength));
    } else {
        result = numberOfElement.slice(upStart, upStart + howManyelement);
    }
    console.log(result);
    // 更新起始位置：向前移动7个，处理负数情况实现循环
    upStart = (upStart - howManyelement + arrLength) % arrLength;
});

效果说明 #

• 点击DOWN按钮：会依次打印[1-7]→[8-14]→[15-21]→[22-28]→[29-30,1-5]→[6-12]……以此无限循环。
• 点击UP按钮：会依次打印[24-30]→[17-23]→[10-16]→[3-9]→[26-30,1-2]→[19-25]……以此无限循环。

内容的提问来源于stack exchange，提问作者Jitender