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 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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开发文件系统实例讲解
2006/10/09 PHP
谈谈PHP语法(5)
2006/10/09 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
js Date概念详细介绍
2013/11/22 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Python 序列的方法总结
2016/10/18 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python OS模块实例详解
2019/04/15 Python
Python的log日志功能及设置方法
2019/07/11 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
结束运行python的方法
2020/06/16 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
《北大荒的秋天》教学反思
2014/04/14 职场文书
三人合伙协议书范本
2014/10/29 职场文书
材料员岗位职责
2015/02/10 职场文书
法人代表证明书范本
2015/06/18 职场文书