网站首页JavaScript
分页的实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分页的实现</title>
<style type="text/css">
*{margin:0;padding:0;}
a{color:#666;text-decoration:none;font-size:14px;}
ul.pagination{clear:both;display:block;overflow:hidden;margin:50px auto 0;width:fit-content;background-color:#cce8cf;}
ul.pagination li{float:left;display:inline-block;margin:0 10px 0 0;border:1px solid #666;list-style:none;}
ul.pagination li:last-child{margin-right:0;}
ul.pagination li a{display:block;padding:5px 10px;text-align:center;}
ul.pagination li.active{background-color:#666;}
ul.pagination li.active a{color:#fff;}
</style>
</head>
<body>
<ul class="pagination">
</ul>
<script type="text/jscript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
/**
 * 分页
 * 说明：页码数字最多显示10个，其中当前页位于第6个。
 *
 * @param int totalPages 总页数
 * @param int page 当前页
 * @return void
 */
function pagination(totalPages, page) {
    if (totalPages > 0) {
        var html = '';

        // 计算起始页码和结束页码
        var start = page - 5; // 当前页往前数5页
        var end = page + 4; // 当前页往后数4页

        // 起始页码小于1需要调整
        if (start < 1) {
            end += Math.abs(start) + 1; // 结束页码加大
            start = 1; // 起始页码改为1
        }

        // 结束页码大于总页数需要调整（结束页码改为总页数）
        end = end > totalPages ? totalPages : end;

        // 页码数字不足10个
        if ((end - start) < 9) {
            start -= 10 - (end - start + 1); // 起始页码减小
            start = start > 0 ? start : 1; // 避免起始页码为负数
        }

        // 上一页处理（当前页码大于1才有上一页）
        if (page > 1) {
            html += '<li><a href="javascript:;">上一页</a></li>';
        }

        // 页码处理
        for (i = start; i <= end; i++) {
            if (i == page) {
                html += '<li class="active"><a href="javascript:;">' + i + '</a></li>';
            } else {
                html += '<li><a href="javascript:;">' + i + '</a></li>';
            }
        }

        // 下一页处理（当前页码小于总页数才有下一页）
        if (page < totalPages) {
            html += '<li><a href="javascript:;">下一页</a></li>';
        }

        $('ul.pagination').html(html);
    }
}

pagination(32, 16);
</script>
</body>
</html>