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 选择器 xpath 语法应用
May 13 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
javascript读写json示例
Apr 11 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
实现高性能javascript的注意事项
May 27 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP实现小偷程序实例
2016/10/31 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
微信小程序实现手势滑动效果
2019/08/26 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python 打印中文字符的三种方法
2018/08/14 Python
pycharm安装和首次使用教程
2018/08/27 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
高中生学习的自我评价
2013/12/14 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
临床护理求职信
2014/04/26 职场文书
世界遗产导游词
2015/02/13 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
会计入职心得体会
2016/01/22 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
Python中的变量与常量
2021/11/11 Python