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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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执行sql语句的写法
2009/03/10 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
js 居中漂浮广告
2010/03/21 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python使用re模块验证危险字符
2020/05/21 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers