js 实现模仿酷站的分页控件

最新推荐文章于 2021-12-31 10:40:12 发布

M_Want_To_Fly

最新推荐文章于 2021-12-31 10:40:12 发布

阅读量651

点赞数

分类专栏： JS开发

本文链接：https://blog.csdn.net/M_Want_To_Fly/article/details/8828596

版权

JS开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

酷站分页控件效果图：

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../Style/js/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        var leftNum = 6; //左侧显示页码个数，如果当前页的左侧页码数量超出4个，那么需要出现省略号
        var centerNum = 7;//中间显示页码个数
        var count =21; //总页码数

        function CreatePager(cur_index) {
            var item = "";
            item = LoadItem(cur_index);
            $("#div_paper").html(item);
        }

//总页数>7
        function LoadItem(cur_index) {
            var item = "";
            var startIndex = 0;
            var endIndex = 0;
            if (cur_index <= leftNum) {//如果当前页码小于5,那么加载1-7（中间要显示的页码数量）
                startIndex = 1;
                if (centerNum > count) {
                    endIndex = count;
                } else {
                    endIndex = centerNum;
                }
            } else {//加载当前页码的前3项和后3个页码，
                item += "<li class=\"pagerItem\" οnclick=\"CreatePager(1)\">1</li>";
                item += "<li class=\"null_pagerItem\">...</li>";
                startIndex = cur_index - 3;
                endIndex = cur_index + 3;
            }

            if (endIndex > count) {
                endIndex = count;
                startIndex = count - centerNum + 2; //+2 是为了补足中间显示的页码个数
                startIndex = startIndex == 0 ? 1 : startIndex;
            }
            for (var i = startIndex; i <= endIndex; i++) {
                if (i == cur_index) {
                    item += "<li class=\"cur_pagerItem\" οnclick=\"CreatePager(" + i + ")\">" + i + "</li>";
                } else {
                    item += "<li class=\"pagerItem\" οnclick=\"CreatePager(" + i + ")\">" + i + "</li>";
                }
            }
            if (endIndex < count) { //...末尾页码的加载
                if ((endIndex + 1) >= count) {//中间页码的最后一个页码是倒数第二个页码时，...末尾的页码就是最后一页的页码
                    item += "<li class=\"null_pagerItem\">...</li>";
                    for (var i = count; i <= count; i++) {
                        item += "<li class=\"pagerItem\" οnclick=\"CreatePager(" + i + ")\">" + i + "</li>";
                    }
                } else {//否则，加载倒数后两个为...后面的页码
                    item += "<li class=\"null_pagerItem\">...</li>";
                    for (var i = count-1; i <= count; i++) {
                        item += "<li class=\"pagerItem\" οnclick=\"CreatePager(" + i + ")\">" + i + "</li>";
                    }
                }
            }
            return item;
        }

    </script>
    <style type="text/css">
        
    </style>
</head>
<body οnlοad="CreatePager(1)" style="margin:0; padding:0">
    <form   runat="server" id="form1">

        <div style="border:solid 1px red;height:30px; line-height:30px; text-align:center; margin:0; padding:0; vertical-align:middle">
            <ul style="display:inline; list-style-type:none; text-align:center;" id="div_paper">

            </ul>
        </div>
    </form>
</body>
</html>

M_Want_To_Fly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现模仿酷站的分页控件

酷站分页控件效果图：源码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> var leftNum = 6; //左侧显示页码个数，如果当前页的左侧页码数量超出4个，那么需要出现省略号
复制链接

扫一扫