前端分页仿百度分页效果

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);
            })

最终效果图：

 

转载于:https://www.cnblogs.com/fanyanzhao/p/10569531.html