效果图
//css
body{
margin: 0;
}
.wrap{
width: 830px;
height: 250px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
ul{
padding: 0;
margin: 0;
list-style:none;
}
.lists li{
width: 200px;
height: 200px;
background-color:pink;
float: left;
margin-right: 10px;
font-size:16px;
}
.lists li:nth-child(4){
margin-right:0;
}
.pages{
position: absolute;
bottom: 0;
left: 0;
}
.pages li{
width:40px;
height:40px;
background-color: burlywood;
border-radius: 50%;
margin-right: 15px;
float: left;
font-size: 15px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.pages li.active{
background-color: blueviolet;
color: brown;
}
</style>
//html
<div class="wrap">
<ul class="lists">
</ul>
<ul class="pages">
</ul>
</div>
//JS
<script src="jquery.min.js"></script>
<script>
//获取数据
$.ajax("apple.txt",{
"dataType":"json", //返回的数据为json格式
}).done(function(data){ 获取的数据存在data里
//解析数据
var num = 4;
var iPage = Math.ceil(data.length/num);
//创建按钮
for(var i=0;i<iPage;i++){
$("<li>").html("第"+(i+1)+"页").on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
whichApple($(this).index());
}).appendTo($(".pages")).addClass(i==0 ? "active" : "");
}
whichApple(0);
function whichApple(n){ //n=0 ->0,1,2,3
$(".lists").html("");
for(var i=n*4;i<(n+1)*4&&i<data.length;i++){
var oP1 = $("<p>").html("商品编号").append($("<span>").html(data[i].id));
var oP2 = $("<p>").html("商品名称").append($("<span>").html(data[i].name));
var oP3 = $("<p>").html("商品价格").append($("<span>").html(data[i].price));
$("<li>").append(oP1).append(oP2).append(oP3).appendTo($(".lists"))
}
}
})
</script>
注意事项:代码要在服务器中加载哦