Html5实现自己的分页加载

Html代码：

[html]  view plain  copy

1. <div class="dv-big-page">  
2. <div class="dv-margin-left"></div>  
3.   <div class="dv-page-box">  
4.      <div class="dv-page-position-box">  
5.             <li class="li_prew"><<</li>  
6.             <div id="div_li_btn_mid">  
7.               <div class="dv_btns_box">  
8.                 <li class="li_btn">1</li>  
9.                 <li class="li_btn">2</li>  
10.                 <li class="li_btn">3</li>  
11.             <li class="li_btn">4</li>  
12.                 <li class="li_btn">5</li>  
13.                 <li class="li_btn">6</li>  
14.                <li class="li_btn">7</li>  
15.               </div>  
16.            </div>  
17.            <li class="li_next">>></li>  
18.         </div>  
19.    </div>  
20. </div>  

Css样式：

 

[html]  view plain  copy

1. .dv-big-page{  
2. clear:both;  
3. width: 960px;  
4. height: 30px;  
5. margin-left:auto;  
6. margin-right:auto;  
7. }  
8. .dv-page-position-box{  
9. width:320px;  
10. height:30px;  
11. margin:auto;  
12. }  
13. .dv-margin-left{  
14. float:left;  
15. width: 210px;  
16. height: 30px;  
17. }  
18. .dv-page-box{  
19. float:left;  
20. margin-top:40px;  
21. margin-bottom:40px;  
22. width: 750px;  
23. height: 30px;  
24. }  
25. .li_prew{  
26.     width: 38px;  
27.     height: 28px;  
28.     border: solid 1px #e3e3e3;  
29.     text-align: center;  
30.     list-style: none;  
31.     cursor: pointer;  
32.     float: left;  
33.     font-size: 18px;  
34.     color:#858585;  
35.     line-height:28px;  
36. }  
37. .li_btn{  
38.     width: 38px;  
39.     height: 28px;  
40.     border: solid 1px #e3e3e3;  
41.     text-align: center;  
42.     list-style: none;  
43.     cursor: pointer;  
44.     float: left;  
45.     line-height:28px;  
46.     font-size: 18px;  
47.     color:#858585;  
48. }  
49. .li_btn:hover{  
50. cursor: pointer;  
51. line-height:28px;  
52.     font-size: 18px;  
53.     background-color: #00bcd4;  
54.     color:#fff;  
55. }  
56.    
57. .li_next{  
58.     width: 38px;  
59.     height: 28px;  
60.     border: solid 1px #e3e3e3;  
61.     text-align: center;  
62.     list-style: none;  
63.     cursor: pointer;  
64.     float: left;  
65.     line-height:28px;  
66.     font-size: 18px;  
67.     color:#858585;  
68. }  
69. .dv_btns_box{  
70. width: 280px;  
71. }  
72. .li_next:hover,  
73. .li_prew:hover{  
74. cursor: pointer;  
75. line-height:28px;  
76.     font-size: 18px;  
77.     background-color: #00bcd4;  
78.     color:#fff;  
79. }  
80. #div_li_btn_mid{  
81.     width: 240px;  
82.     height: 30px;  
83.     float: left;  
84.     overflow: hidden;  
85. }  

Js代码：

[html]  view plain  copy

1. //初始化分页  
2. function initPageSelector(){  
3. activePageButton();  
4. initSelectPage();  
5. }  
6. function activePageButton(){  
7. $(".li_btn").click(function(){  
8. $(".li_btn").css("background-color","#fff");  
9. $(".li_btn").css("color","#858585");  
10. $(this).css("background-color","#00bcd4");  
11. $(this).css("color","#fff");  
12. });  
13. }  
14. /*  
15.  * 上衣页 下一页事件监听  
16.  */  
17. function initSelectPage(){  
18. $(".li_next").click(function(){  
19. document.getElementById("div_li_btn_mid").scrollLeft+=40;  
20. });  
21. $(".li_prew").click(function(){  
22. document.getElementById("div_li_btn_mid").scrollLeft-=40;  
23. });  
24. }  

效果截图：