想必大家都用過百度查找過我們想要的信息，每次我們查找東西的時候，百度都會返給我們很多很多相似和有關的結果，而這些結果是不可能一頁就顯示完全的，通常會分很多很多頁，效果圖如下。所以我們今天就是要分享一下，這個分頁效果是怎麼達成的。
首先我們觀察這個分頁
#一頁中顯示的頁碼數是固定的
當期頁碼大於等於2的時候，開始顯示'上一頁'按鈕，當總頁數比目前顯示的頁碼大於等於1的時候，開始顯示'下一頁'按鈕的按鈕
如果我們想要新增'首頁'和'尾頁'按鈕的話，那當首頁不能在頁面顯示的時候，新增'首頁'按鈕。如果尾頁不能顯示在頁面的時候新增『尾頁』按鈕。
上面的情況確定之後，就是要進行細分的了，分情況進行討論。首先我們分兩大種情況：當頁面顯示的頁數大於等於總頁數的時候以及當頁面顯示的頁數小於總頁數的時候兩種情況。前一種情況比較簡單，就不再細說了，主要是當總頁數比頁面能顯示的頁數大的時候還要分三種情況：1、當前頁的頁碼小於等於頁面中能顯示頁數的二分之一時2、當前頁為最後的幾頁的時候，以及除了上面兩種情況的其他的情況。
文字描述可能有點難懂，所以接下來我們直接上例子，js中有詳細的註解方便理解（首先說明，頁面中顯示的頁數為5，至於有多少頁如果在實際專案中應該是透過ajax動態取得資料的，然後根據資料的多少自動取得總頁數。為了方便理解這裡我是用的模擬資料）
HTML程式碼：
<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>註解的部分是我們要透過js動態加入的。
CSS程式碼：
<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>js程式碼：
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;
}
}
}相關推薦：
#以上是js實作分頁的效果實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
