分页

1、HTML结构代码如下：

<div class="main">
    <div class="item">
        <ul class="clear">
            <li><img src="~/Content/img2/34.jpg" /></li>
            <li><img src="~/Content/img2/35.jpg" /></li>
            <li><img src="~/Content/img2/36.jpg" /></li>
            <li><img src="~/Content/img2/34.jpg" /></li>
            <li><img src="~/Content/img2/38.jpg" /></li>
            <li><img src="~/Content/img2/32.jpg" /></li>
            <li><img src="~/Content/img2/31.jpg" /></li>
            <li><img src="~/Content/img2/30.jpg" /></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样式代码如下：

.main {
   width: 800px;zoom: 1;margin: 0 auto;
}
.item {
   width: 800px;height:600px;overflow: hidden;
   border-radius:10px;border:1px solid #ccc4c4;
}
ul {
   padding: 0;width: 860px;zoom: 1;
}
.clear {
   zoom: 1;
}
.clear:after {
   content: "";display: block;height: 0;clear: both;visibility: hidden;
}
ul li {                                                 
   width: 750px;height: 550px; color: #fff;padding-bottom:40px;     
}
ul li img{
   width: 750px;height: 550px;background-size:100% 100%;
   margin: -10px 40px 10px 26px;border-radius: 10px;
}
.page_btn {
   margin:25px 37%;
}
.page_btn a {
   cursor: pointer;padding: 5px;
   border: solid 1px #ccc;font-size: 12px;
}
.page_box {
   float: right;
}
.num {
   padding: 0 10px;
}

4、js代码

$(document).ready(function(){
    $("ul li:gt(0)").hide();//初始化，前面数据显示，其他的数据隐藏。
     var total_q=$("ul li").index()+1;//总数据
     var current_page=1;//每页显示的数据
     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 == 8) {
         alert("已是最后一页")
         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;//结束范围
                 //如果索引值是在start和end之间的元素就显示，否则就隐
                 if(index >= start && index < end){
                     $(this).show();
                 }else {
                     $(this).hide();
                 }
             });
         }
 });
 //上一页方法
 $(".prev").click(function(){
     if (current_num == 1) {
         alert("已是第一页")
             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;//结束范围
                 //如果索引值是在start和end之间的元素就显示，否则就隐藏
                 if (index >= start && index < end) {                                
                     $(this).show();
                 }else {
                     $(this).hide();
                 }
             });
         }
     })
})

5、展示图