最近在做公司需求时,前台页面展示轮播图,前端人员给的页面是一个div里包含了4个张图,当多于四张时,进行轮播。
但我从后台获取到图片数据后,想的是拼接div,在div里拼上图,拼接四个后,再创建个div进行拼接。 但是这里遇到麻烦了,我遍历图片数组拼接的时候,判断的下标+1除以四等于0的时候,新建div。
结果问题出现了,当有五张图的时候,第五张就不再显示了,思来想去,最后想到可以将数组拆分个二维数组,每个数组里存四个,下面上代码。
Array.prototype.chunk = function (length) { //获取要切割的数组的长度 var length= parseInt(length); //如果长度小于要划分的长度,返回原数组 if (len <= 1 || this.length < length) return this; var groups = []; //拆分成的二维数组的个数 var number= Math.ceil(this.length / length); //用slice方法,每四个截取一次 for (var i = 0; i < number; i++) groups.push(this.slice(len * i, len * (i + 1))); return groups; }
调用: var newarray = 原数组.chunk(4);