JQuery 分页实现

 JQuery分页实现 

css:

.liList0 {
 padding-left:5px;
}
.liList0 li {
 width:160px;
 float:left;
 display:inline;
 margin:5px
}
.liList0 li i {
 display:block
}
.liList0 li i.iBtn {
 padding:5px 0
}

 

html:

<div class="liList0" style="height:670px; overflow:hidden; width:700px;">
       

      </div>
<div class="page"><a  class="pageUp">上一页</a><a class="pageNext">下一页</a><a class="curpage"></a></div>
<div id="pageDiv">
 <ul>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j02.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j02.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j03.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j03.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j01.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j04.jpg" width="160" height="295" /></i></li>
          <li><i class="iPic"><img  src="images/img_j04.jpg" width="160" height="295" /></i></li>
   </ul>
</div>
js:

<script src="http://jquery-api-zh-cn.googlecode.com/svn/trunk/style/lib/jquery.js"></script>

var noPage = 8;
 var num = Math.ceil($("#pageDiv ul li").size()/noPage);
 for(i=0; i < num;i++){
  var txt = $("#pageDiv").html();
  $(".liList0").append(txt);
  
  $(".liList0 ul").hide().eq(0).show();
  $(".curpage").html("第1页")
 }
 $("#pageDiv ul").remove();
 $(".liList0 ul").each(function(i){
   $(".liList0 ul").eq(i).find("li").each(function(j){// 分页
   if(!(j<(i+1)*noPage && j>=(i)*noPage)){
    $(this).remove()
    }
  })
 })
 $(".liList0 ul").each(function(){
  var k=0;
  $(".pageNext").click(function(){
    if(k < (num-1)){
    $(".liList0 ul").eq(k).hide().next("ul").show();
    k++;
    $(".curpage").html("第"+(k+1)+"页")
    }
  })
  $(".pageUp").click(function(){
   if(k > 0){
    $(".liList0 ul").eq(k).hide().prev("ul").show();
    k--;
    $(".curpage").html("第"+(k+1)+"页")
   }
  })
 })