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

<title>分页</title>
<style>
html,body,ul,li{padding:0;margin:0}
ul{list-style-type:none}
.item{ width: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{ width:300px; height:29px; margin:0 auto; border:1px solid #333;}
.page li{ float:left; margin-right:10px; width: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>

posted on 2014-03-15 16:08  N&#179;  阅读(133)  评论(0编辑  收藏  举报