jQuery客户端分页实例代码


Posted in Javascript onNovember 18, 2013
<script src="/js/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="/images/001.jpg" alt="第一页的第一张"/> 
           <img src="/images/002.jpg" /> 
           <img src="/images/003.jpg" /> 
           <img src="/images/004.jpg" /> 
           <img src="/images/005.jpg" />  
       </div> 
       <a href="javascript:next()">下一页</a> 
   </div>
Javascript 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
javascript验证身份证完全方法具体实现
Nov 18 #Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 #Javascript
YUI模块开发原理详解
Nov 18 #Javascript
深入领悟JavaScript中的面向对象
Nov 18 #Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 #Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 #Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 #Javascript
You might like
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
Json序列化和反序列化方法解析
2013/12/19 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vuex存储token示例
2019/11/11 Javascript
js实现点击生成随机div
2020/01/16 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python初学者常见错误详解
2019/07/02 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python调用私有属性的方法总结
2020/07/24 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
2014年售后服务工作总结
2014/11/18 职场文书
材料员岗位职责
2015/02/10 职场文书
秋季运动会加油词
2015/07/18 职场文书
初中信息技术教学反思
2016/02/16 职场文书
python删除csv文件的行列
2021/04/06 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Python列表的索引与切片
2022/04/07 Python