JavaScript实现定时器循环展示数组

本文实例为大家分享了JavaScript实现定时器循环展示数组的具体代码，供大家参考，具体内容如下

先看看效果图

流程

使用数组的slice() 方法通过条件判断截取原数组相应内容组成新数组

循环数组

let currentPage = 0
// arr:原数组 newLen:新数组需要的长度 currentPage:现在的页码

// 方法一：
function loopData(arr, newLen) {
  let len = arr.length;
  let result = len - currentPage;
  let newArr = [];
  if (result > 0 && result < newLen) {
    newArr = [
      ...arr.slice(currentPage - result, len),
      ...arr.slice(0, newLen - result),
    ];
    currentPage = newLen - result;
  } else if (result >= newLen) {
    newArr = arr.slice(currentPage, currentPage + newLen);
    currentPage += newLen;
  } else {
    currentPage = 0;
    newArr = arr.slice(currentPage, currentPage + newLen);
  }
  return newArr;
}

// 方法二：
function loopData(arr, newLen) {
  let len = arr.length;
  let newArr = [];
  if (currentPage === len) {    // 页码等于数组长度时，从0重新开始
    currentPage = 0;
  }
  if (currentPage + newLen <= len) {
    newArr = [...arr.slice(currentPage, currentPage + newLen)];
    currentPage++;
  } else if (currentPage + newLen > len && currentPage < len) {
    newArr = [
      ...arr.slice(currentPage, len),
      ...arr.slice(0, newLen - len + currentPage),
    ];
    currentPage++;
  }
  return newArr;
}

简单案例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。