今天叫大家怎么用js写简易分页

 

 首先是style

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 1100px;height: 400px;
            margin: 0 auto;
        }
        .box .zt{
            width: 1100px;height: 340px;
            background: #eee;
        }
        .box .zt dl{
            width: 200px;height: 320px;
            /* border: #000 solid 1px; */
            float: left;
            margin-top: 20px;
            margin-left: 15px;
        }
        .box .zt dl dt img{
            width: 200px;height: 200px;
        }
        .box .xia{
            width: 1100px;height: 60px;
        }
        .box .xia .you{
            width: 360px;height: 60px;
            float: right;
            line-height: 60px;
        }
        .box .xia .you .bt1{
            width: 45px;height: 60px;
            float: left;
        }
        .box .xia .you .bt2{
            width: 45px;height: 60px;
            float: left;

        }
        .box .xia .you p{
            float: left;
        }
        .box .xia .you p span{
            padding: 0 20px;
            text-align: center;
            display: inline-block;
            margin-left: 10px;
        }
        .box .xia .you p span.red{
            background: blueviolet;
        }
    </style>

简单的布局

 <div class="box">
        <div class="zt">
            
        </div>
        <div class="xia">
            <div class="you">
                <button class="bt1"><</button>
                <p></p>
                <button class="bt2">></button>
            </div>
        </div>
    </div>

js代码：

 function Fun(sel){
            this.dom = document.querySelector(sel);
            this.zt = this.dom.children[0];
            this.xia = this.dom.children[1];

            this.you = this.dom.children[1].children[0];
            this.bt1 = this.dom.children[1].children[0].children[0];
            this.bt2 = this.dom.children[1].children[0].children[2];
            this.p = this.dom.children[1].children[0].children[1];
            this.sps = this.dom.children[1].children[0].children[1].children;

            this.arr = [
                {src:"./beautiful/1.jpeg",text:"美女1"},
                {src:"./beautiful/2.jpeg",text:"美女2"},
                {src:"./beautiful/3.jpeg",text:"美女3"},
                {src:"./beautiful/4.jpeg",text:"美女4"},
                {src:"./beautiful/5.jpeg",text:"美女5"},
                {src:"./beautiful/6.jpeg",text:"美女6"},
                {src:"./beautiful/7.jpeg",text:"美女7"},
                {src:"./beautiful/8.jpeg",text:"美女8"},
                {src:"./beautiful/1.jpeg",text:"美女9"},
                {src:"./beautiful/2.jpeg",text:"美女10"},
                {src:"./beautiful/3.jpeg",text:"美女11"},
                {src:"./beautiful/4.jpeg",text:"美女12"},
                {src:"./beautiful/5.jpeg",text:"美女13"},
                {src:"./beautiful/6.jpeg",text:"美女14"},
                {src:"./beautiful/7.jpeg",text:"美女15"},
                {src:"./beautiful/8.jpeg",text:"美女16"},
                {src:"./beautiful/1.jpeg",text:"美女17"},
                {src:"./beautiful/2.jpeg",text:"美女18"},
                {src:"./beautiful/3.jpeg",text:"美女19"},
                {src:"./beautiful/4.jpeg",text:"美女20"},
            ]
            this.num = 0;
            this.count = 0;
            this.index = 0;


            this.init();
        }
        Fun.prototype = {
            constructor:Fun,
            init:function(){
                this.rebor(this.arr.slice(0,5));
                this.bindEvent();
            },
            rebor:function(x){
                this.zt.innerHTML = x.map(function(ltem,y){
                    return `<dl>
                                <dt><img src="${ltem.src}" alt=""></dt>
                                <dd>
                                    <p>${ltem.text}</p>
                                </dd>
                            </dl>`
                }).join("")

            },
            bindEvent:function(){
                this.num = Math.ceil(this.arr.length/5);
                var str = "";
                for(var i = 0;i<this.num;i++){
                    if(i==0){
                        str+=`<span class = "red">${i+1}</span>`
                    }else{
                        str+=`<span>${i+1}</span>`
                    }
                }
                this.p.innerHTML = str;

                this.p.onclick = function(e){
                    e = e || window.event;
                    var ele = e.target || e.srcElement;
                    if(ele.nodeName=="SPAN"){

                        this.index = [...this.sps].indexOf(ele)
                        this.count = this.index
                        this.aa();
                        
                    }
                }.bind(this)

                this.you.onclick = function(e){
                    e = e || window.event;
                    var ele = e.target || e.srcElement;

                    if(ele.nodeName=="BUTTON" && ele.className=="bt2"){
                        this.count++;
                        this.aa();
                    }
                    if(ele.nodeName=="BUTTON" && ele.className=="bt1"){
                        this.count--;
                        this.aa();
                    }
                }.bind(this)

                


            },
            aa:function(){
                this.index = this.count;

                [...this.sps].forEach(function(ltem,y){
                    ltem.classList.remove("red")
                }.bind(this))
                this.sps[this.index].classList.add("red")

                this.rebor(this.arr.slice(this.count*5,(this.count+1)*5));

                if(this.count==0){
                    this.bt1.disabled = true;
                }else if(this.count>=this.num-1){
                    this.bt2.disabled = true;
                }else{
                    this.bt1.disabled = false;
                    this.bt2.disabled = false;
                }
            }
        }
        var s = new Fun(".box");

私信我拿原图