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 相关文章推荐
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
HTML的select控件美化
Mar 27 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 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
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
微信小程序tabBar设置实例解析
2019/11/14 Javascript
JS实现拼图游戏
2021/01/29 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
事务机电主管工作职责
2014/02/25 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
无保留意见审计报告
2015/06/05 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
教你用python实现12306余票查询
2021/06/30 Python
JavaScript中reduce()的用法
2022/05/11 Javascript