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----文件操作
Jan 18 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 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设计模式 Interpreter(解释器模式)
2011/06/26 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php session_decode函数用法讲解
2019/05/26 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python整数对象实现原理详解
2019/07/01 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
如何删除一个表里面的重复行
2013/07/13 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
高一新生军训感言
2014/03/02 职场文书
房地产推广策划方案
2014/05/19 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
小学端午节活动总结
2015/02/11 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server