SOURCE

  function pagepackages(pageCount, pageIndex, pageshow) {
    const firstPage = `<li class="first"><a href="#"${pageIndex === 1 ? ' class="nopg"' : ' value="first"'}>首页</a></li>`;
    const previousPage = `<li class="prev"><a href="#"${pageIndex === 1 ? ' class="nopg"' : ' value="pre"'}>上一页</a></li>${pageIndex > Math.ceil(pageshow / 2) ? '<li style="background:none">…</li>' : ''}`;
    const nextPage = `${pageIndex < (pageCount - Math.floor(pageshow / 2)) ? '<li style="background:none">…</li>' : ''}<li class="next"><a href="#"${pageIndex === pageCount ? ' class="nopg"' : ' value="next"'}>下一页</a></li>`;
    const lastPage = `<li class="last"><a href="#"${pageIndex === pageCount ? ' class="nopg"' : ' value="last"'}>末页</a></li>`;
    const numTotlePhone = `<li class="numtotlephone">当前页：${pageIndex}/${pageCount}</li>`;
    const numTotle = `<li class="numtotle">当前第<span class="sp1">${pageIndex}</span>页，共<span class="sp2">${pageCount}</span>页。</li>`;
    let page = '';
    for (let i = Math.max(1, Math.min(pageCount - pageshow + 1, pageIndex - Math.floor(pageshow / 2))), end = Math.min(pageCount, Math.max(pageshow, pageIndex + Math.floor(pageshow / 2))); i <= end; i++) {
      page += `<li class="${i === pageIndex ? 'thisclass pagenum' : 'pagenum'}">${i === pageIndex ? `${i}` : `<a href="#" value="${i}">${i}</a>`}</li>`;
    }
    $(".page > ul").html(pageCount <= 1 ? `${numTotlePhone}${numTotle}` : `${firstPage}${previousPage}${numTotlePhone}${page}${nextPage}${lastPage}${numTotle}`);
  }

<div class="page">
  <ul></ul>
</div>

<script>
  var pageCount = 20;
  /*总页数*/
  var pageIndex = 1;
  /*当前页*/
  var pageshow = 7;
  /*显示页数*/
  window.onload = function() {
    pagepackages(pageCount, pageIndex, pageshow);
  };

</script>

a{
  text-decoration: none;
}
.page {
  width: 100%;
  overflow: hidden;
  padding: 15px 0;
  clear: both;
  font-size: 14px;
}

.page ul {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.page ul li {
  box-sizing: border-box;
  font-size: 14px;
  /* float: left; */
  /* height: 40px; */
  text-align: center;
  /* border: #cccccc solid 1px; */
  line-height: 16px;
  background: #eee;
  color: #666;
  display: inline-block;
  margin: 0 5px;
}

.page ul .pagenum {
  /* width: 30px; */
  /* display: none; */
}

.page ul .thisclass {

  background: #fb0606;

  color: #fff;

  border: 1px solid #fb0606;

  padding: 8px 10px;
}

.page ul .first {
  /* width: 60px; */
  /* border-right: 0; */
}

.page ul .prev {
  /* width: 60px; */
  /* border-right: 0; */
}

.page ul .numtotle {
  /* display: none; */
  border: 0;
  background:transparent;
  color: #000;
}

.page ul .numtotlephone {
  display: none;
}

.page ul .next {
  /* width: 60px; */
  /* border-left: 0; */
}

.page ul .last {
  width: 60px;
}

.page ul li a {
  /* width: 100%; */
  /* height: 100%; */
  display: block;
  background: #fff;
  color: #666;
  border: #cccccc solid 1px;
  padding: 8px 10px;
}

.page ul li a:hover {
  background: #fb0606;
  color: #fff;
  border: 1px solid #f21d17;
  text-decoration: none;
}

.page ul li a.nopg {
  background: transparent;
  border: #eee 1px solid;
  color: #999;
}

.page ul li a.nopg:hover {
  background: transparent;
  border: #eee 1px solid;
  color: #999;
  cursor: not-allowed;
}