jQuery客户端分页

01<script src="/js/jquery-1.4.1.js" type="text/javascript"></script>
02   <script type="text/javascript">
03       var pageindex = 1;
04       var pagesize = 2;
05       $(function () {
06           previous();
07       })
08       function previous() {
09           if (pageindex < 1 || pageindex == 1) {
10               pageindex = 1;
11               $("#imgdiv img:lt(" + pagesize + ")").show();
12               $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
13           }
14           else {
15               pageindex--;
16               if (pageindex != 1) {
17                   $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt("+ pagesize + ")").show();
18                   $("#imgdiv img").not($("#imgdiv img:gt("+ ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
19               }
20               if (pageindex == 1) {
21                   $("#imgdiv img:lt(" + pagesize + ")").show();
22                   $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
23               }
24           }
25       }
26       function next() {
27           var p = $("#imgdiv img").length / pagesize;
28 
29           var pagecount = parseInt(Math.ceil(p));
30 
31           if (pageindex + 1 > pagecount) {
32               pageindex = pagecount;
33           } else {
34               pageindex++;
35           }
36           $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt("+ pagesize + ")").show();
37           $("#imgdiv img").not($("#imgdiv img:gt("+ ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
38       }
39   </script>
40<div>
41       <a href="javascript:previous()">上一页</a>
42       <div id="imgdiv">
43           <img src="/images/001.jpg" alt="第一页的第一张"/>
44           <img src="/images/002.jpg" />
45           <img src="/images/003.jpg" />
46           <img src="/images/004.jpg" />
47           <img src="/images/005.jpg"/>
48       </div>
49       <a href="javascript:next()">下一页</a>
50   </div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值