您现在的位置是:网站首页> 编程资料编程资料

JavaScript实现定时器循环展示数组_javascript技巧_

2023-05-24 401人已围观

简介 JavaScript实现定时器循环展示数组_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; }

简单案例

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

-六神源码网