A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 网页制作 > JavaScript实现列表分页功能特效

JavaScript实现列表分页功能特效

时间:2015-05-16 12:00作者:zhao人气:207

最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚。最终实现的效果是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最后一页、下一页。n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5。写的时候,主要注意了以下几个地方:

页码等于1时,只显示上一页、第一页、最后一页,且都没有跳转;

页码小于等于2时,不需要中间的n个页码;

页码小于等于n时,显示所有页码,不显示2个“…”;

2个“…”换页时,换n个页码,如果接近最前面或最后面几页了,则显示最前面或最后面n个页码。

下面贴出代码,供大家探讨:

//总页数,当前页数,跳转地址,第一页和最后一页之间显示的页码数量

function pageBar(tp,cp,url,pn){

var str = ‘<ul class=”page”>';

if(tp>1 && cp>1){

var prev = cp-1;

str += ‘<li><a class=”prev” title=”上一页” href=”javascript:goPage(‘+prev+‘,”+url+‘');”><span>上一页</span></a></li> ‘;

}else{

str += ‘<li><a class=”prev” title=”上一页” href=”javascript:void(0);”><span>上一页</span></a></li> ‘;

}

if(tp>1){

//第一页

if(cp==1){

str +=‘<li class=”current”><a href=”javascript:goPage(1,”+url+‘');”><span>1</span></a></li> ‘;

}else{

str +=‘<li><a href=”javascript:goPage(1,”+url+‘');”><span>1</span></a></li> ‘;

}

if(tp>2){

var pnh = Math.floor(pn/2);

//循环开始页码

var s = cp-pnh;

if(s<=1){

s = 2;

}

//循环结束页码

var e = cp+pnh;

if(e>=tp){

e = tp-1;

}

if(s<=(1+pnh)){

if(tp>(pn+2)){

e = s+(pn-1);

if(e>=tp){

e = tp-1;

}

}else{

s = 2;

}

}

if(e>=(tp-pnh)){

if(tp>(pn+2)){

s = e-(pn-1);

if(s<=1){

s = 2;

}

}else{

e = tp-1;

}

}

if(e<s){

e = s;

}

//第一页后的多页跳转

if(s>2){

var sp = cp-pn;

if(sp<1){

sp=1;

}

str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,”+url+‘');”><span>…</span></a></li> ‘;

}

for(var i=s;i<=e;i++){

if(i==cp){

str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,”+url+‘');”><span>'+i+‘</span></a></li> ‘;

}else{

str += ‘<li><a href=”javascript:goPage(‘+i+‘,”+url+‘');”><span>'+i+‘</span></a></li> ‘;

}

}

//最后一页前的多页跳转

if(e < (tp-1)){

var ep = cp+pn;

if(ep>tp){

ep=tp;

}

str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,”+url+‘');”><span>…</span></a></li> ‘;

}

}

//最后一页

if(cp==tp){

str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,”+url+‘');”><span>'+tp+‘</span></a></li> ‘;

}else{

str +=‘<li><a href=”javascript:goPage(‘+tp+‘,”+url+‘');”><span>'+tp+‘</span></a></li> ‘;

}

}else{

str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘;

}

if(tp>1 && cp<tp){

var next = cp+1;

str += ‘<li><a class=”next” title=”下一页” href=”javascript:goPage(‘+next+‘,”+url+‘');”><span>下一页</span></a></li>';

}else{

str += ‘<li><a class=”next” title=”下一页” href=”javascript:void(0);”><span>下一页</span></a></li>';

}

str += ‘</ul>';

return str;

}

//跳转页码,跳转地址

function goPage(cp,url){

window.location.href = url+cp;

}

以上所述就是本文的全部内容了,希望大家能够喜欢。

标签JavaScript,实现,列表,分页,功能,特效,最近,写

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号