分页

<!DOCTYPE html>
<meta charset="utf-8">

<title>分页</title>
<style>
html,body,ul,li{padding:0;margin:0}
ul{list-style-type:none}
.item{ 300px; height:145px; overflow:hidden; margin:0 auto; border:1px solid #333;}
.item li{ height:29px; line-height:29px; border-bottom:1px solid #ccc;}
.page{ 300px; height:29px; margin:0 auto; border:1px solid #333;}
.page li{ float:left; margin-right:10px; 14px; height:14px; line-height:14px;cursor:pointer; text-align:center; border-radius:7px; background:#666; color:#fff;}
.page li.cur{ background:#ccc; color:#666;}
</style>
<div class="item">
   <ul>
       <li>1
       <li>2
       <li>3
       <li>4
       <li>5
       <li>6
       <li>7
       <li>8
       <li>9
       <li>11
       <li>12
       <li>13
       <li>14
       <li>15
       <li>16
       <li>17
       <li>18
       <li>19
       <li>20
       <li>21
       <li>22
       <li>23
   </ul>
</div>

<script src="jquery-1.8.3.min.js"></script>
<script>

   function pageFun(){

       var box = $('.item li'),
           lismun = box.length,//总行数
           pagemun = 5,//一页5条
           p = Math.ceil(lismun/pagemun),//需要几页
           str = '';
       if(lismun<=pagemun)
           return;
       box.unwrap();

       for(var i=1;i<=p;i++){
           //if(i>1){
               str=str+'<li>'+i;
           //}
           var start=pagemun*(i-1),
               end=start+pagemun;
           if(end>lismun) end=lismun;
           var lastli=box.slice(start, end);
           lastli.wrapAll("<ul></ul>");
       }

       $('.item').after('<ul class="page">'+str+'</ul>');

       $('.page li:first').addClass('cur');


   }
   pageFun();

   $(".page li").mouseover(function(){
       var ddd=$(".page li").index(this);
           $(this).addClass("cur").siblings().removeClass("cur");//当前标签
           $(".item>ul").eq(ddd).show().siblings().hide();//当前内容
       });

</script>