js-分页

照片效果

 html代码

    <div class="box">
        <span class="left_btn">&lt;</span>
        <span class="neirong"></span>
        <span class="right_btn">&gt;</span>
        <select name="" id="">
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <ul></ul>

css代码

    <style>
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }

        li {
            list-style: none;
            width: 350px;
            text-align: center;
            padding: 5px;
            margin-bottom: 10px;
            border: 2px solid gold;
        }

        .box {
            display: flex;
        }

        .box>.left_btn,
        .box>.right_btn {
            width: 30px;
            height: 30px;
            background-color: aquamarine;
            border-radius: 10px;
            text-align: center;
            line-height: 30px;

        }

        .box>.neirong {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            /* background-color: beige; */
        }

        .box>select {
            padding: 0 10px;
            margin-left: 10px;
            border-radius: 10px;
        }

        .box>.stop {
            cursor: not-allowed;
            background-color: #ccc;
        }
    </style>

js代码

 <!-- 引入外部链接 -->
    <script src="../dm_list.js"></script>

    <script>
        /* 获取元素 */
        var ulEle = document.querySelector('ul');
        var left_btn = document.querySelector('.left_btn');
        var right_btn = document.querySelector('.right_btn');
        var neirong = document.querySelector('.neirong');
        var select_in = document.querySelector('select')
        // console.log(neirong);

        /* 设置变量 */
        var newYe = 1; // 当前的页数 默认1
        var jige = 4; // 一页显示几个 默认4
        var zongYe = 0; // 总页数 不知道默认0 

        // console.log(zongYe)

        /* 页数  内容  一页几个
            1    0~3    4
            2    4~7    4
            3    8~11   4
        (newYe-1)*jige ~ newYe*jige-1
        */

        /* 因为每次点击都要执行里面的代码 直接套函数调用 */
        function xuanran() {

            var new_lists = lists.slice((newYe - 1) * jige, newYe * jige); // 截取几~几个
            // console.log(new_lists);
            ulEle.innerHTML = new_lists.reduce(function (prve, item) {
                // console.log(item);
                return prve + `
             <li>
                  <img src='${item['pic']}'>
                  <p>音乐节名字:${item['name']}</p>
                  <p>演出时间:${item['showTime']}</p>
                  <p>门票价格:${item['price']}</p>
                  <p>城市:${item['city']}</p>
                  <p>地址:${item['address']}</p>
              </li>
            `
            }, '');
            zongYe = Math.ceil(lists.length / jige); // 数组的长度除以一页多少个
            neirong.innerHTML = `${newYe} /${zongYe} `
            left_btn.className = newYe === 1 ? 'left_btn stop' : 'left_btn'
            right_btn.className = newYe === zongYe ? 'right_btn stop' : 'right_btn'
        }
        xuanran();
        left_btn.onclick = function () {
            if (newYe === 1) return;
            newYe--;
            xuanran();
        };
        right_btn.onclick = function () {
            if (newYe === zongYe) return;
            newYe++;
            xuanran();
        };
        select_in.onchange = function () {
            jige = select_in.value - 0;
            newYe = 1;
            xuanran();
        };
    </script>