页面（轮播图）代码

最新推荐文章于 2024-04-18 17:53:07 发布

侠客博园

最新推荐文章于 2024-04-18 17:53:07 发布

阅读量310

点赞数 1

本文链接：https://blog.csdn.net/wen15191038073/article/details/119877011

版权

<!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"}
]

此代码为完整代码，有兴趣的可以添加自己喜欢照片运行(更换图片路径即可)

侠客博园

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面（轮播图）代码

<!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>Doc
复制链接

扫一扫