<!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>