js实现分页的效果实例

<ul id="ul1"></ul>
<p id="p1">
 <!--<a href="#1">首页</a>
 <a href="#3">上一页</a>
 <a href="#2">[2]</a>
 <a href="#3">[3]</a>
 <a href="#4">4</a>
 <a href="#5">[5]</a>
 <a href="#6">[6]</a>
 <a href="#5">下一页</a>
 <a href="#10">尾页</a>-->
</p>

 <style>
 *{ margin:0; padding:0;}
 li{ list-style:none;}
 #ul1{ width:600px; height:250px;}
 #ul1 li{ width:100px; height:100px; background:red; float:left; overflow:hidden; margin:10px;}
 a{ margin:5px;}
 </style>

 var json = {
 title : [
 '效果1',
 '效果2',
 '效果3',
 '效果4',
 '效果5',
 '效果6',
 '效果7',
 '效果8',
 '效果9',
 '效果10',
 '效果11',
 '效果12',
 '效果13',
 '效果14',
 '效果15',
 '效果16',
 '效果17',
 '效果18',
 '效果19',
 '效果20',
 '效果21',
 '效果22',
 '效果23',
 '效果24',
 '效果25',
 '效果26',
 '效果27',
 '效果28',
 '效果29',
 '效果30',
 '效果31',
 '效果32',
 '效果33',
 '效果34',
 '效果35',
 '效果36',
 '效果37',
 '效果38',
 '效果39',
 '效果40',
 '效果41',
 '效果42',
 '效果43',
 '效果44',
 '效果45',
 '效果46',
 '效果47',
 '效果48',
 '效果49',
 '效果50',
 '效果51'
 ]
 };

 var arr=[];
 var iNow = 9;
 page({
 id:'p1',
 nowNum:1,
 allNum:Math.floor(json.title.length/10),
 callBack:function(){alert(0)}
 });

 function page(opt){
 if(!opt.id){
 return false;
 }
 var obj = document.getElementById(opt.id);
 var nowNum = opt.nowNum||1;
 var allNum = opt.allNum||5;
 var callBack = opt.callBack||function(){};
 if(nowNum>=4&&allNum>=6){//首页出现的情况，就是当现在的页码大于等于4并且总页码大于等于6时
 var oA = document.createElement('a');
 oA.href = '#1';
 oA.innerHTML = '首页';
 obj.appendChild(oA);
 }
 if(nowNum>=2){//只要页码大于等于2就会出现上一页
 var oA = document.createElement('a');
 oA.href = '#'+(nowNum - 1);
 oA.innerHTML = '上一页';
 obj.appendChild(oA);
 }
 if(allNum<=5){//因为我们让一页最多显示5个页码，所以，如果总页码小与等于5，就说明页码可以显示完全
 for(var i=1;i<=allNum;i++){
 var oA = document.createElement('a');
 oA.href = '#'+i;
 if(nowNum==i){
 oA.innerHTML = i;
 }else{
 oA.innerHTML = '['+i+']';
 }
 obj.appendChild(oA);
 }
 }
 else{//下面的情况是当总页码大于5的时候进行的分类
 for(var i=1; i<=5;i++){
 var oA = document.createElement('a');
 if(nowNum == 1||nowNum==2){//在总页数大于5的情况下继续根据当前页进行细分。如果当前的页为1或者为2的时候
 oA.href = '#'+i;
 if(nowNum ==i){
 oA.innerHTML = i;
 }else{
 oA.innerHTML = '['+i+']'
 }
 }else if((allNum - nowNum)==0||(allNum - nowNum)==1){//如果当前页为最后一页或者倒数第二页的时候，说明显示的5页即为最后5页，所以就是下面的公式
 oA.href = '#'+(allNum - 5+i);
 if((allNum - nowNum)==0&&i==5){
 oA.innerHTML = (allNum - 5 + i);
 }else if((allNum - nowNum)==1&&i==4){
 oA.innerHTML = (allNum - 5 +i);
 }else{
 oA.innerHTML = '['+(allNum - 5 +i)+']'
 }
 }else{//当前页码处在5个页码的中间的时候
 oA.href = '#'+(nowNum - 3 +i);
 if(i==3){
 oA.innerHTML = (nowNum - 3 + i);
 }else{
 oA.innerHTML = '['+(nowNum - 3 +i)+']'
 }
 }
 obj.appendChild(oA);
 }
 }
 if((allNum - nowNum)>=1){//如果总页数比当前页码大于等于1的时候显示‘下一页’
 var oA = document.createElement('a');
 oA.href = '#'+(nowNum+1);
 oA.innerHTML = '下一页';
 obj.appendChild(oA);
 }
 if((allNum - nowNum)>=3&&allNum>=6){//如果总页数比当前页码大于等于3并且总页码大于等于6的时候显示‘尾页’；
 var oA = document.createElement('a');
 oA.href = '#'+allNum;
 oA.innerHTML = '尾页';
 obj.appendChild(oA);

 }
 callBack(nowNum,allNum);
 var aA = obj.getElementsByTagName('a');
 for(var i=0; i<aA.length;i++){
 aA[i].onclick = function(){
 var nowNum = parseInt(this.getAttribute('href').substring(1));//得到当前的页码数
 obj.innerHTML = '';
 page({
 id : opt.id,
 nowNum : nowNum,
 allNum : allNum,
 callBack : callBack}

 );
 return false;
 }
 }
 }