JavaScript实现列表分页功能特效

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

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

　　下面贴出代码，供大家探讨：

跳转地址，第一页和最后一页之间显示的页码数量 function pageBar(tp,cp,url,pn){ var str = ‘

  if(tp>2){
    var pnh = Math.floor(pn/2);

    //循环开始<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>
    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> ‘;
      }
    }

    //最后一页前的多页<a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>
    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;

}

//@R339404@码，跳转地址
function goPage(cp,url){
window.location.href = url+cp;
}

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

原文链接：https://www.f2er.com/js/54284.html

JavaScript实现列表分页功能特效

猜你在找的JavaScript相关文章