<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="layerui/layui/css/layui.css">
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
#box{
1200px;
margin:0 auto;
}
#box li{
float: left;
210px;
height: 250px;
border: 1px solid #c2c2c2;
margin-left: 20px;
background: #fff;
box-shadow: 2px 3px 1px #c1c1c1;
margin-bottom: 10px;
}
#box li img {
100%;
height: auto;
}
#box li h4{
float: left;
display: block;
font-size: 18px;
margin-left: 5px;
margin-top: 3px;
}
#box li span{
float: left;
display: block;
font-size: 18px;
font-family: "微软雅黑";
margin-left:8px;
}
#box li a{
float: left;
display: block;
80px;
height: 30px;
background: red;
border: 1px;
font-size: 14px;
border-radius: 10px;
text-align: center;
color: #fff;
line-height: 30px;
margin-left: 15px;
}
</style>
</head>
<body>
<ul id="box">
<!-- <li>
<img src="img/1.jpg">
<h4>面包</h4>
<span>6$</span>
<a href="#">加入购物车</a>
</li> -->
</ul>
<div id="btnList"></div>
</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script src="layerui/layui/layui.js"></script>
<script>
$.ajax({
type:"get",
url:"product.json",
dataType:"json",
success:function(data){
//请求和回复之间的一个应用
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'btnList' //注意，这里的 test1 是 ID，不用加 # 号
,count: data.length, //数据总数，从服务端得到
limit:5,
groups:3,
prev:"上一页",
next:"下一页",
jump:function(obj){
pageNum(obj)
function pageNum(obj){
var str = "";
for(var i=(obj.curr-1)*obj.limit;i<Math.min(data.length,obj.limit*obj.curr);i++){
str+=`<li>
<img src="${data[i].imgres}">
<h4>${data[i].title}</h4>
<span>${data[i].price}</span>
<a href="#">加入购物车</a>
</li>`
}
$("#box").html(str);
}
}
});
});
}
})
// ajax({
// type:"get",
// url:"product.json",
// data:{},
// success:function(data) {
// var data = JSON.parse(data);
// //页码的数量
// var len = Math.ceil(data.length/5);
// var obtnList = document.querySelector(".btnList");
// var oBox = document.getElementById("box");
// //获取下一页功能键
// var oLast = document.querySelector(".last");
// var ofirst = document.querySelector(".first");
// var iNow = 1;
// for(var i=0;i<len;i++){
// var a = document.createElement("a");
// a.className = "page";
// a.innerText = (i+1);
// obtnList.insertBefore(a,oLast);
// }
// var aA = document.querySelectorAll(".page");
// aA[0].className = "code1";
// pageNum(iNow)
// function pageNum(n){
// var str = "";
// for(var i=(n-1)*5;i<Math.min(data.length,5*n);i++){
// str+=`<li>
// <img src="${data[i].imgres}">
// <h4>${data[i].title}</h4>
// <span>${data[i].price}</span>
// <a href="#">加入购物车</a>
// </li>`
// }
// oBox.innerHTML = str;
// }
// oLast.onclick = function(){
// if(iNow == len){
// iNow = len;
// }else{
// iNow++;
// }
// pageNum(iNow)
// toggle(iNow)
// }
// ofirst.onclick = function(){
// if(iNow == 1){
// iNow = 1;
// }else{
// iNow--;
// }
// pageNum(iNow)
// toggle(iNow)
// }
// function toggle(iNow){
// for(var j=0;j<aA.length;j++){
// aA[j].className = "";
// }
// aA[iNow-1].className = "code1"
// }
// for(var i=0;i<aA.length;i++){
// aA[i].index = i;
// aA[i].onclick = function(){
// for(var j=0;j<aA.length;j++){
// aA[j].className = "";
// }
// this.className = "code1";
// iNow = (this.index+1);
// pageNum(iNow)
// }
// }
// }
// })
</script>