首页客户案例高端网站建设SEO优化小程序APP开发抖音 X 获客网络营销关于动态联系咨询

如何实现JavaScript列表分页功能特效

7个有用的jQuery代码最近写了一个js分页的方法,最终实现的效果是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最后一页、下一页。n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5。写的时候,主要注意了以下几个地方:

 页码等于1时,只显示上一页、第一页、最后一页,且都没有跳转;  页码小于等于2时,不需要中间的n个页码;  页码小于等于n时,显示所有页码,不显示2个“…”;  2个“…”换页时,换n个页码,如果接近最前面或最后面几页了,则显示最前面或最后面n个页码。

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

//总页数,当前页数,跳转地址,第一页和最后一页之间显示的页码数量 function pageBar(tp,cp,url,pn){ var str = ‘
    '; if(tp>1 && cp>1){ var prev = cp-1; str += ‘
  • 上一页
  • ‘; }else{ str += ‘
  • 上一页
  • ‘; } if(tp>1){ //第一页 if(cp==1){ str +=‘
  • 1
  • ‘; }else{ str +=‘
  • 1
  • ‘; }

    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
    //第一页后的多页跳转 if(s>2){ var sp = cp-pn; if(sp<1){ sp=1; } str += ‘
  • ‘; }

    for(var i=s;i<=e;i++){ if(i==cp){ str += ‘
  • '+i+‘
  • ‘; }else{ str += ‘
  • '+i+‘
  • ‘; } }

    //最后一页前的多页跳转 if(e < (tp-1)){ var ep = cp+pn; if(ep>tp){ ep=tp; } str += ‘
  • ‘; } }

    //最后一页 if(cp==tp){ str +=‘
  • '+tp+‘
  • ‘; }else{ str +=‘
  • '+tp+‘
  • ‘; }

    }else{ str +=‘
  • 1
  • ‘; }

    if(tp>1 && cp下一页'; }else{ str += ‘
  • 下一页
  • '; } str += ‘
'; return str; }

//跳转页码,跳转地址 function goPage(cp,url){ window.location.href = url+cp; } 本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

日期:2015年05月25日

标签: 广州网站设计公司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作 、 高端网站设计 、 高端网站建设 、 广州高端网站设计 、 广州高端网站建设

获取您的项目定制及优化报价。

* 为广州天河、白云、海珠、番禺、花都、南沙区提供网站建设服务。
微信二维码15876521776免费获取诊断报告