前端分頁仿百度分頁效果

css部分：

*{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            .pagination li{
                height: 28px;
                float: left;
                font-size: 20px;
                color: #A21B2C;
                text-align: center;
                cursor: pointer;
                padding: 0 5px;
                margin: 0 5px;
            }
            .pagination .selected-act{
                background: #A21B2C;
                border-radius: 5px;
                color: #fff;
            }
            .pagination .change-page{
                font-size: 16px;
                color: #A21B2C;
                height: 28px;
                width: 28px;
                text-align: center;
                float: left;
                line-height: 28px;
                cursor: pointer;
                margin: 0 20px;
            }
            .first-page,.last-page{
                float: left;
                font-size: 20px;
                color: #A21B2C;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
            }
            .forbid-click{
                opacity: 0.3;
                pointer-events: none;
            }

HTML部分：

<div class="pagination">
            <div class="first-page">
                首頁
            </div>
            <div class="pre-page change-page">
                《
            </div>
            <ul class="pagination-ul">
            </ul>
            <div class="next-page change-page">
                》
            </div>
            <div class="last-page">
                尾頁
            </div>
        </div>

js部分：

var total = 100;//總頁數 function pagination(currentVal,totalVal){//當前頁，總頁數 var html = '';
                var currentPage = currentVal;
                var pageArr = [];//盛放當前顯示的所有頁碼的數組 if(totalVal < 11){//總頁數小於11頁的情況 var pageArr = [];
                    for(var i = 0;i<totalVal;i++){
                        pageArr.push(i+1);
                    }
                }else if(currentPage > 5 && (totalVal - currentPage) > 3){//當前頁大於5且總頁數減當前頁大於3
                    pageArr = [currentPage-5,currentPage-4,currentPage-3,currentPage-2,currentPage-1,currentPage,currentPage+1,currentPage+2,currentPage+3,currentPage+4]
                }else if(currentPage > 5 && totalVal - currentPage < 4){//當前頁大於5且總頁數減當前頁小於4
                    pageArr = [totalVal-9,totalVal-8,totalVal-7,totalVal-6,totalVal-5,totalVal-4,totalVal-3,totalVal-2,totalVal-1,totalVal]
                }else if(currentPage<6 && totalVal > 9){//當前頁小於6且總頁數大於9 var pageArr = [];
                    for(var i = 0;i<10;i++){
                        pageArr.push(i+1);
                    }
                }
　　　　　　　　　　//當前頁對應的頁碼加高亮 for(var h=0;h<pageArr.length;h++){
                    if(pageArr[h]==currentVal){
                        html += '<li class="selected-act">'+pageArr[h]+'</li>';
                    }else{
                        html += '<li>'+pageArr[h]+'</li>';
                    }
                }
                document.getElementsByClassName('pagination-ul')[0].innerHTML = html;
                if(currentVal == 1){//如果當前頁等於1則首頁和上一頁按鈕禁止點擊
                    $('.first-page').addClass('forbid-click');
                    $('.pre-page').addClass('forbid-click');
                    $('.last-page').removeClass('forbid-click');
                    $('.next-page').removeClass('forbid-click');
                }else if(currentVal == total){//如果當前頁等於總頁數則尾頁和下一頁按鈕禁止點擊
                    $('.last-page').addClass('forbid-click');
                    $('.next-page').addClass('forbid-click');
                    $('.first-page').removeClass('forbid-click');
                    $('.pre-page').removeClass('forbid-click');
                }else{//以上條件都不滿足則所有按鈕均可點擊
                    $('.first-page').removeClass('forbid-click');
                    $('.last-page').removeClass('forbid-click');
                    $('.pre-page').removeClass('forbid-click');
                    $('.next-page').removeClass('forbid-click');
                }
                $('.pagination li').click(function(){//點擊頁碼
                    $('.pagination li').unbind();//先解綁點擊事件避免疊加
                    pagination(parseInt($(this).text()),total)
                })
                $('.pre-page').click(function(){//點擊上一頁按鈕
                    $('.pre-page').unbind();
                    pagination(currentVal-1,total);
                })
                $('.next-page').click(function(){//點擊下一頁按鈕
                    $('.next-page').unbind();
                    pagination(currentVal+1,total);
                })
            }
            pagination(55,total);
            $('.first-page').click(function(){//點擊首頁按鈕
                pagination(1,total);
            });
            $('.last-page').click(function(){//點擊尾頁按鈕
                pagination(total,total);
            })

最終效果圖：