分页```js 顶部导航 <

<!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>

      * {

        margin: 0;

        padding: 0;

      }

  


      .header,

      .footer {

        width: 1200px;

        margin: 0 auto;

        background-color: skyblue;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 50px;

        height: 120px;

        color: #fff;

      }

  


      .footer {

        height: 300px;

      }

  


      ul,

      li {

        list-style: none;

      }

  


      ul {

        width: 1200px;

        display: flex;

        flex-wrap: wrap;

        margin: 0 auto;

        justify-content: space-between;

        padding-top: 10px;

      }

  


      li {

        width: 290px;

        border: 1px solid #333;

        margin-bottom: 10px;

        padding: 5px;

        box-sizing: border-box;

      }

  


      li > img {

        width: 278px;

        display: block;

      }

  


      .pagination {

        width: 1200px;

        margin: 10px auto;

        height: 50px;

        display: flex;

        align-items: center;

      }

  


      .pagination > .prev,

      .pagination > .next {

        width: 50px;

        height: 30px;

        cursor: pointer;

        background-color: orange;

        font-size: 24px;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center;

      }

  


      .pagination > .disable {

        cursor: not-allowed;

        background-color: #ccc;

      }

  


      .pagination > .total {

        font-size: 30px;

        font-weight: 700;

        margin: 0 20px;

      }

  


      .pagination > select {

        font-size: 22px;

        padding-left: 20px;

        margin-left: 30px;

      }

    </style>

  </head>

  


  <body>

    <div class="header">顶部导航</div>

  


    <div class="pagination">

      <span class="prev disable">&lt;</span>

      <span class="total">1 / 100</span>

      <span class="next">&gt;</span>

      <select class="sel">

        <option value="4">4</option>

        <option value="8">8</option>

        <option value="12">12</option>

        <option value="16">16</option>

      </select>

    </div>

  


    <ul></ul>

  


    <div class="footer">底部导航</div>

    <script src="./dm_list.js"></script>

    <script>

      //节点

  


      var oUl = document.querySelector('ul')

      var total = document.querySelector('.total')

      var prev = document.querySelector('.prev')

      var next = document.querySelector('.next')

  


      var sel = document.querySelector('.sel')

      //全局变量

      var yema = 1 //初始页码

      var mys = 4 //每页数据量

      var zongye = 0 //总页数

      //渲染页面 渲染部分 切割得到新数组 渲染到页面中

      //如何得到部分是多少呢

      function listfn() {

        var newlist = list.slice((yema - 1) * mys, yema * mys)

        oUl.innerHTML = newlist.reduce(function (prev, item) {

          return (

            prev +

            `

          <li>

              <img src=${item.pic} alt="">

              <p class='liname'>${item.name}</p>

              <p>城市: ${item.city}</p>

              <p>地址: ${item.address}</p>

              <p>价格: ${item.price}</p>

              <p>时间: ${item.showTime}</p>

            </li>        

          `

          )

        }, '')

  


        //页码

        zongye = Math.ceil(list.length / mys)

        total.innerHTML = `${yema} / ${zongye}`

  


        //设置左右箭头颜色变化 通过clas控制 添加和删除

        yema === 1 ? prev.classList.add('disable') : prev.classList.remove('disable')

        yema === zongye ? next.classList.add('disable') : next.classList.remove('disable')

      }

      listfn()

  


      //事件触发

      //前后翻页

      prev.onclick = function (e) {

        if (yema === 1) return

        yema--

        listfn()

      }

      next.onclick = function (e) {

        if (yema === zongye) return

        yema++

        listfn()

      }

  


      //解决bug

      //改变每页的数据量 select option onchange

      sel.onchange = function (e) {

        console.log(e.target.value)

        mys = e.target.value

        yema = 1

        listfn()

      }

    </script>

  </body>

</html>