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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
环境工程大学生个人的自我评价
2013/10/08 职场文书
中学运动会广播稿
2014/01/19 职场文书
小学生交通安全寄语
2015/02/27 职场文书
给校长的建议书范文
2015/09/14 职场文书
《鲸》教学反思
2016/02/23 职场文书