<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#box {
width: 700px;
height: 300px;
background-size: 500px 300px;
position: relative;
margin: 100px auto;
border: 1px solid red;
}
#btn-previous {
width: 30px;
position: absolute;
left: 25px;
top: 250px;
}
#btn-next {
width: 30px;
position: absolute;
left: 650px;
top: 250px;
}
li {
list-style: none;
width: 120px;
height: 200px;
margin: 10px;
float: left;
border: 1px solid red;
background: url(images/1.jpg);
}
ul {
position: absolute;
left: 25px;
top: 20px;
}
img {
width: 120px;
height: 200px;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<input id="btn-previous" type="button" value="<" />
<input id="btn-next" type="button" value=">" />
<ul>
<li>
<img />
<p></p>
</li>
<li>
<img />
<p></p>
</li>
<li>
<img />
<p></p>
</li>
<li>
<img />
<p></p>
</li>
</ul>
</body>
</html>
<script>
//获取
var oLis=document.querySelectorAll('li');
var oPrev=document.querySelector('#btn-previous');
var oNext=document.querySelector('#btn-next');
//应用es6创建一个class 创建一个类
class paging{
constructor(newLis){
this.oLis=newLis;
this.index=0;
this.arr=[];
this.eventbind();
}
getdata(){
var that=this;
var xhr=new XMLHttpRequest();
xhr.open('get','list.json',true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
that.fun(xhr.responseText);
}
}
}
fun(resText){
this.arr=JSON.parse(resText);
console.log(this.arr);
this.setPage();
}
setPage(){
for(let i=this.index*4,j=0;i<this.index*4+4;i++,j++){
this.oLis[j].firstElementChild.src = this.arr[i].img;
this.oLis[j].lastElementChild.innerHTML = this.arr[i].info;
}
}
next(){
this.index++;
if(this.index==this.arr.length/4){
this.index=0;
}
this.setPage();
}
prev(){
this.index--;
if(this.index=-1){
this.index==this.arr.length/4-1;
}
this.setPage();
}
eventbind(){
var that=this;
oPrev.onclick=function(){
that.prev();
}
oNext.onclick=function(){
that.next();
}
}
}
var oP=new paging(oLis);
oP.getdata();
// oP.setpage();
</script>
[
{
"id":1,"info":"我是商品1","price":180.00,"img":"images/1.jpg"},
{
"id":2,"info":"我是商品2","price":190.00,"img":"images/2.jpg"},
{
"id":3,"info":"我是商品3","price":210.00,"img":"images/3.jpg"},
{
"id":4,"info":"我是商品4","price":170.00,"img":"images/4.jpg"},
{
"id":5,"info":"我是商品5","price":150.00,"img":"images/5.jpg"},
{
"id":6,"info":"我是商品6","price":140.00,"img":"images/6.jpg"},
{
"id":7,"info":"我是商品7","price":110.00,"img":"images/7.jpg"},
{
"id":8,"info":"我是商品8","price":120.00,"img":"images/8.jpg"},
{
"id":9,"info":"我是商品9","price":130.00,"img":"images/9.jpg"},
{
"id":10,"info":"我是商品10","price":170.00,"img":"images/10.jpg"},
{
"id":11,"info":"我是商品11","price":120.00,"img":"images/11.jpg"},
{
"id":12,"info":"我是商品12","price":230.00,"img":"images/12.jpg"},
{
"id":13,"info":"我是商品13","price":187.00,"img":"images/13.jpg"},
{
"id":14,"info":"我是商品14","price":199.00,"img":"images/1.jpg"},
{
"id":15,"info":"我是商品15","price":201.00,"img":"images/3.jpg"},
{
"id":16,"info":"我是商品16","price":213.00,"img":"images/5.jpg"},
{
"id":17,"info":"我是商品17","price":119.00,"img":"images/7.jpg"},
{
"id":18,"info":"我是商品18","price":195.00,"img":"images/9.jpg"},
{
"id":19,"info":"我是商品19","price":234.00,"img":"images/12.jpg"},
{
"id":20,"info":"我是商品20","price":2222.00,"img":"images/7.jpg"},
{
"id":21,"info":"我是商品21","price":22.00,"img":"images/9.jpg"},
{
"id":22,"info":"我是商品22","price":120.00,"img":"images/11.jpg"},
{
"id":23,"info":"我是商品23","price":230.00,"img":"images/12.jpg"},
{
"id":24,"info":"我是商品24","price":187.00,"img":"images/13.jpg"}
]
此代码为完整代码，有兴趣的可以添加自己喜欢照片运行(更换图片路径即可)