Bootstrap动态分页条（js实现滚动页码） 

$(function() {
    var arr = new Array();
    arr[0] = 123;
    arr[1] = 456;
    arr[2] = 789;
    arr[3] = 101;
    arr[4] = 233;
    arr[5] = 234;
    arr[6] = 288;
    arr[7] = 299;
    arr[8] = 123;
    arr[9] = 456;
    arr[10] = 789;
    arr[11] = 101;
    arr[12] = 233;
    arr[13] = 234;
    arr[14] = 288;
    arr[15] = 299;
    var pagebar = "<li id='pageLiBegin'><a class='pageABegin' href='javascript:void(0);' onclick='prev(5," + arr.length + ")'>&laquo;</a></li>";
    for(var i = 1; i < arr.length+1; i++) {
        if(i <= 5) {
            pagebar += "<li id='pageli" + i + "'><a class='pagea" + i + "' href='javascript:void(0);' >0" + i + "</a></li>";
        } else {
            if(i < 10) {
                pagebar += "<li style='display:none;' id='pageli" + i + "'><a class='pagea" + i + "' href='javascript:void(0);' >0" + i + "</a></li>";
            } else {
                pagebar += "<li style='display:none;' id='pageli" + i + "'><a class='pagea" + i + "' href='javascript:void(0);' >" + i + "</a></li>";
            }
        }
    }
    pagebar += "<li id='pageLiEnd'><a class='pageAEnd' href='javascript:void(0);' onclick='next(5," + arr.length + ")'>&raquo;</a></li>";
    $(".pagination").html(pagebar);
});

var x = 0;

function prev(j, len) {
    if(x != 0) {
        var leftIndex = x;
        x--;
        var rightIndex = leftIndex + j;
        document.getElementById("pageli" + leftIndex).style.display = "";
        document.getElementById("pageli" + rightIndex).style.display = "none";
    } 
}

function next(j, len) {
    var l = len;
    if(len > j) {
        x++;
        var leftIndex = 0;
        var rightIndex = ((l + j) - l) + x;
        if(len != rightIndex) {
            leftIndex = rightIndex - j;
            if (rightIndex < len) {
                document.getElementById("pageli" + leftIndex).style.display = "none";
                document.getElementById("pageli" + rightIndex).style.display = "";
            } else {
                x--;
            }
        } else {
            var n = j;
            if ((n+x) == rightIndex) {
                var left = leftIndex + x;
                document.getElementById("pageli" + left).style.display = "none";
                document.getElementById("pageli" + rightIndex).style.display = "";
                x++;
            }
            x--;
        }
    }

}

html：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 分页的状态</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>

        <ul class="pagination">
            <li>
                <a href="#">&laquo;</a>
            </li>
            <li class="active">
                <a href="#">1</a>
            </li>
            <li class="disabled">
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </body>

</html>

 

posted @ 2017-08-06 01:53  鄒成立  阅读(921)  评论(0)    收藏  举报