JavaScript实现列表分页功能特效

最近在做一个小项目，有时需要制作静态页面网站，而一旦涉及到文章的分页，实现起来非常麻烦，自己又刚入门，对js不是很熟悉，所以就拿来练练手。

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

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

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

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

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

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

1. //总页数，当前页数，跳转地址，第一页和最后一页之间显示的页码数量 
2. function pageBar(tp,cp,url,pn){ 
3. var str = ‘<ul class=”page”>'; 
4. if(tp>1 && cp>1){ 
5. var prev = cp-1; 
6. str += ‘<li><a class=”prev” title=”上一页” href=”javascript:goPage(‘+prev+‘,/”+url+‘/');”><span>上一页</span></a></li> ‘; 
7. }else{ 
8. str += ‘<li><a class=”prev” title=”上一页” href=”javascript:void(0);”><span>上一页</span></a></li> ‘; 
9. } 
10. if(tp>1){ 
11. //第一页 
12. if(cp==1){ 
13. str +=‘<li class=”current”><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘; 
14. }else{ 
15. str +=‘<li><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘; 
16. } 
17.  
18. if(tp>2){ 
19. var pnh = Math.floor(pn/2); 
20.  
21. //循环开始页码 
22. var s = cp-pnh; 
23. if(s<=1){ 
24. s = 2; 
25. } 
26.  
27. //循环结束页码 
28. var e = cp+pnh; 
29. if(e>=tp){ 
30. e = tp-1; 
31. } 
32.  
33. if(s<=(1+pnh)){ 
34. if(tp>(pn+2)){ 
35. e = s+(pn-1); 
36. if(e>=tp){ 
37. e = tp-1; 
38. } 
39. }else{ 
40. s = 2; 
41. } 
42. } 
43.  
44. if(e>=(tp-pnh)){ 
45. if(tp>(pn+2)){ 
46. s = e-(pn-1); 
47. if(s<=1){ 
48. s = 2; 
49. } 
50. }else{ 
51. e = tp-1; 
52. } 
53. } 
54.  
55. if(e<s){ 
56. e = s; 
57. } 
58.  
59. //第一页后的多页跳转 
60. if(s>2){ 
61. var sp = cp-pn; 
62. if(sp<1){ 
63. sp=1; 
64. } 
65. str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,/”+url+‘/');”><span>…</span></a></li> ‘; 
66. } 
67.  
68. for(var i=s;i<=e;i++){ 
69. if(i==cp){ 
70. str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘; 
71. }else{ 
72. str += ‘<li><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘; 
73. } 
74. } 
75.  
76. //最后一页前的多页跳转 
77. if(e < (tp-1)){ 
78. var ep = cp+pn; 
79. if(ep>tp){ 
80. ep=tp; 
81. } 
82. str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,/”+url+‘/');”><span>…</span></a></li> ‘; 
83. } 
84. } 
85.  
86. //最后一页 
87. if(cp==tp){ 
88. str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘; 
89. }else{ 
90. str +=‘<li><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘; 
91. } 
92.  
93. }else{ 
94. str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘; 
95. } 
96.  
97. if(tp>1 && cp<tp){ 
98. var next = cp+1; 
99. str += ‘<li><a class=”next” title=”下一页” href=”javascript:goPage(‘+next+‘,/”+url+‘/');”><span>下一页</span></a></li>'; 
100. }else{ 
101. str += ‘<li><a class=”next” title=”下一页” href=”javascript:void(0);”><span>下一页</span></a></li>'; 
102. } 
103. str += ‘</ul>'; 
104. return str; 
105. } 
106.  
107. //跳转页码，跳转地址 
108. function goPage(cp,url){ 
109. window.location.href = url+cp; 
110. } 

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