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>