1、html

<div class="main">
    <div class="item">
        <ul class="clear">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
        </ul>
    </div>
    <div class="page_btn clear">
        <span class="page_box">
                <a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
        </span>
    </div>
</div>

2、css

body {
    overflow-x:hidden;
    margin:0 auto;
}
.main {
    width:800px;
    zoom:1;
    margin:0 auto;
}
.item {
    width:800px;
    overflow:hidden;
}
ul {
    padding:0;
    width:40%;
    zoom:1;
    margin:0 10px;
}
.clear {
    zoom:1;
}
.clear:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
ul li {
    list-style-type:none;
    float:left;
    background:#c81623;
    font-size:60px;
    text-shadow:1px 1px 3px #555;
    width:37%;
    height:20%;
    margin:10px 10px 10px 30px;
    text-align:center;
    color:#fff;
}
.page_btn {
    padding-top:20px;
    margin:0 5.8rem;
}
.page_btn a {
    cursor:pointer;
    padding:5px;
    border:solid 1px #ccc;
    font-size:16px;
}
.page_box {
    float:left;
    margin-right:15px;
}
.num {
    padding:0 10px;
    font-size:16px;
}

3、js

$(document).ready(function() {
    $("ul li:gt(3)").hide(); //初始化，前面4条数据显示，其他的数据隐藏。
    var total_q = $(".item ul li").length;
    alert(total_q);
    var current_page = 4; //每页显示的数据
    var current_num = 1; //当前页数
    var total_page = Math.round(total_q / current_page); //总页数
    var next = $(".next"); //下一页
    var prev = $(".prev"); //上一页
    $(".total").text(total_page); //显示总页数
    $(".current_page").text(current_num); //当前的页数

    //下一页
    $(".next").click(function() {
        if (current_num == 7) {
            return false; //如果大于总页数就禁用下一页
        } else {
            $(".current_page").text(++current_num); //点击下一页的时候当前页数的值就加1
            $.each($('ul li'), function(index, item) {
                var start = current_page * (current_num - 1); //起始范围
                var end = current_page * current_num; //结束范围
                if (index >= start && index < end) { //如果索引值是在start和end之间的元素就显示，否则就隐
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }
    });
    //上一页方法
    $(".prev").click(function() {
        if (current_num == 1) {
            return false;
        } else {
            $(".current_page").text(--current_num);
            $.each($('ul li'), function(index, item) {
                var start = current_page * (current_num - 1); //起始范围
                var end = current_page * current_num; //结束范围
                if (index >= start && index < end) { //如果索引值是在start和end之间的元素就显示，否则就隐藏
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

    })
})

运行效果：