静态分页

html

<div id="page_box">
    <ul class="list_ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</div>

css

body,div,ul,li{ padding:0; margin:0;}
ul{ list-style:none;}
#page_box{ width:400px;}
.list_ul{ width:400px; height:180px; overflow:hidden;}
.list_ul li{ float:left; display:inline; width:120px; height:80px; margin:10px 5px 0; background-color:#066;}

javascript

function page(boxId, num, tagName){
    var box = document.getElementById(boxId),
        listArr = box.getElementsByTagName(tagName),
        len = listArr.length;
    function hideAll(){
        for (var i = 0; i < len; i++){
            listArr[i].style.display = 'none';
        }
    }
    function showPage(n){
        for (var i = n*num; i < n * num + num; i++){
            listArr[i].style.display = 'block';
        }
    }
    if (len > num){
        var pageNum = Math.ceil(len/num);
        hideAll();
        showPage(0);
        var pageDiv = document.createElement('div'),
            divCss = 'padding-top:15px; text-align:center; color:#666; font-size:14px;',
            spanCss = 'margin:0 5px; cursor:pointer;';
        for (n = 0; n < pageNum; n++){
            var pageSpan = document.createElement('span');
            pageSpan.innerHTML = n + 1;
            pageSpan.style.cssText = spanCss;
            pageDiv.appendChild(pageSpan);
        }
        pageDiv.style.cssText = divCss;
        box.appendChild(pageDiv);
        var spanArr = pageDiv.getElementsByTagName('span'),
            spanLen = spanArr.length;
        for (var m = 0; m < spanLen; m++){(function(m){
                if (m < (spanLen - 1)){
                    spanArr[m].onclick = function(){
                        hideAll();
                        showPage(m);
                    }
                }else{
                    spanArr[m].onclick = function(){
                        hideAll();
                        for (var j = m*num; j < len; j++){
                            listArr[j].style.display = 'block';
                        }
                    }
                }
            })(m)    
        }
    }
}
page('page_box', 6, 'li');

参数说明
page(boxId, num, tagName)
boxId：需要分页盒子的id;
num：每页显示个数
tagName：需要分页的标签