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> |
