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中filter(),not(),split()使用方法
Jul 06 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 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/09/10 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JavaScript类的写法
2016/09/17 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
婚礼证婚人证婚词
2014/01/13 职场文书
五年级学生期末评语
2014/12/26 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
员工给公司的建议书
2019/06/24 职场文书