手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery客户端分页实例代码
jQuery客户端分页实例代码
摘要:复制代码代码如下:varpageindex=1;varpagesize=2;$(function(){previous();})functi...

复制代码 代码如下:

<script src="http://www.jb51.netjs/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

var pageindex = 1;

var pagesize = 2;

$(function () {

previous();

})

function previous() {

if (pageindex < 1 || pageindex == 1) {

pageindex = 1;

$("#imgdiv img:lt(" + pagesize + ")").show();

$("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();

}

else {

pageindex--;

if (pageindex != 1) {

$("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();

$("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();

}

if (pageindex == 1) {

$("#imgdiv img:lt(" + pagesize + ")").show();

$("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();

}

}

}

function next() {

var p = $("#imgdiv img").length / pagesize;

var pagecount = parseInt(Math.ceil(p));

if (pageindex + 1 > pagecount) {

pageindex = pagecount;

} else {

pageindex++;

}

$("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();

$("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();

}

</script>

<div>

<a href="javascript:previous()">上一页</a>

<div id="imgdiv">

<img src="http://www.jb51.netimages/001.jpg" alt="第一页的第一张"/>

<img src="http://www.jb51.netimages/002.jpg" />

<img src="http://www.jb51.netimages/003.jpg" />

<img src="http://www.jb51.netimages/004.jpg" />

<img src="http://www.jb51.netimages/005.jpg" />

</div>

<a href="javascript:next()">下一页</a>

</div>

【jQuery客户端分页实例代码】相关文章:

jQuery实现的多屏图像图层切换效果实例

jQuery实现div随意拖动的实例代码(通用代码)

jQuery插件制作之参数用法实例分析

JQuery自动触发事件的方法

一段实时更新的时间代码

JQuery分屏指示器图片轮换效果实例

JQuery中DOM事件冒泡实例分析

强制设为首页代码

JS+CSS实现的拖动分页效果实例

Jquery中基本选择器用法实例详解

精品推荐
分类导航