效果如下：
    image.png

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     第<span id="pagingText"></span>页，共<span id="total">40</span>页
    11.     <div id="pagingDiv"></div>
    12. </body>
    13. <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    14. <script>
    16.     var total = $('#total').html();
    17.     //一进页面默认第1页
    18.     pagingConstruct(1);
    19.     //点击页数
    20.     $("#pagingDiv").on('click','a',function(){
    21.         var text = $(this).html();
    22.         pagingConstruct(parseInt(text));
    23.     })
    25.     function pagingConstruct(paging){    
    26.          $('#pagingText').html(paging)
    27.         var pagingDivInnerHTML = "";        
    28.         var isHiddenExist = 0;//这里是加载省略号的flag
    29.         //从第1页读到第40页。
    30.         for (var i = 1; i <= total; i++) {        
    31.             if (i == paging) {//如果读到当前页，就仅仅加载一个文本，不放a链接
    32.                 pagingDivInnerHTML += i + " ";
    33.             }else {
    34.                 //如果是页首，中间页，页尾，当前页的前后三页则不省略。
    35.                 if (i < 4 || i < (paging + 3) && i > (paging - 3) || i > (total / 2 - 2) && i < (total / 2 + 2) || i > (total - 3)) {
    36.                     pagingDivInnerHTML += "<a href='javascript:void(0)' >" + i + "</a> ";
    37.                     isHiddenExist = 0;
    38.                 }else {//否则就构造...
    39.                     if (isHiddenExist == 0) {
    40.                         pagingDivInnerHTML += "...";
    41.                         isHiddenExist = 1;
    42.                     }
    43.                 }
    44.             }
    45.         }
    46.         //把构造的内容放上去pagingDiv
    47.         $("#pagingDiv").html(pagingDivInnerHTML);
    48.     }
    50. </script>
    51. </html>