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中的Window窗口对象
Jan 16 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
php中strtotime函数用法详解
2014/11/15 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js中replace的用法总结
2013/12/27 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
详解javascript函数的参数
2015/11/10 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python远程方法调用实现过程解析
2020/07/28 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
娱乐节目策划方案
2014/06/10 职场文书
电影建国大业观后感
2015/06/01 职场文书
鲁冰花观后感
2015/06/10 职场文书
遗嘱范文
2015/08/07 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android