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入门教程(10) 认识其他对象
Jan 31 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
微信小程序sessionid不一致问题解决
Aug 30 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python执行get提交的方法
2015/04/29 Python
Python模拟三级菜单效果
2017/09/11 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
会计专业自荐信范文
2013/12/02 职场文书
初三新学期计划书
2014/05/03 职场文书
安全横幅标语
2014/06/09 职场文书
党员年度个人总结
2015/02/14 职场文书
运动会开幕式主持词
2015/07/01 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python
Python开发简易五子棋小游戏
2022/05/02 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技