html:
<div class="series_products">
<ul id="products_list"></ul>
<div id="demo3" class="layPage"></div>
</div>
js:
var data = [{
href: "javascript:;",
src: "images/img7.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img8.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img9.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img10.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img11.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img12.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img12.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img11.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img10.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img9.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img8.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img7.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img12.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img11.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img10.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img9.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img8.jpg",
name: "安敏修复天丝面膜"
},
{
href: "javascript:;",
src: "images/img7.jpg",
name: "安敏修复天丝面膜"
},
];
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage,
layer = layui.layer;
//自定义首页、尾页、上一页、下一页文本
laypage.render({
elem: 'demo3',
count: data.length,
limit: 6,
groups: 4,
theme: '#ff8874',
first: '首页',
last: '尾页',
layout: ['prev', 'page', 'next'],
prev: '<em><</em>',
next: '<em>></em>',
jump: function (obj) {
//模拟渲染
document.getElementById('products_list').innerHTML = function () {
var arr = [],
// 截取返回数据组中当前跳转页的数据--.concat()返回数组的浅拷贝
thisData = data.concat().splice(obj.curr * obj.limit -
obj.limit, obj.limit);
//thisData为当前跳转页的数据数组
layui.each(thisData, function (index, item) {
arr.push('<li><a class="aLink" href="' +
item.href +
'"/>' +
'<div class="products_pic"><img src="' +
item.src +
'"/></div>' +
'<p class="products_name">' +
item.name +
'</p>' +
'</a></li>');
});
return arr.join('');
}();
}
});
});