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 学习笔记 element属性控制
Jul 23 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
详解js闭包
Sep 02 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php递归函数怎么用才有效
2018/02/24 PHP
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python自动识别文本编码格式代码
2019/12/26 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
会计专业个人求职信范文
2014/01/08 职场文书
青蓝工程实施方案
2014/03/27 职场文书
投资意向书范本
2014/04/01 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB