01 |
<script src= "/js/jquery-1.4.1.js" type= "text/javascript" ></script>
|
02 |
<script type= "text/javascript" >
|
03 |
var pageindex = 1;
|
04 |
var pagesize = 2;
|
05 |
$( function () {
|
06 |
previous();
|
07 |
})
|
08 |
function previous() {
|
09 |
if (pageindex < 1 || pageindex == 1) {
|
10 |
pageindex = 1;
|
11 |
$( "#imgdiv img:lt(" + pagesize + ")" ).show();
|
12 |
$( "#imgdiv img" ).not($( "#imgdiv img:lt(" + pagesize + ")" )).hide();
|
13 |
}
|
14 |
else {
|
15 |
pageindex--;
|
16 |
if (pageindex != 1) {
|
17 |
$( "#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")" ).show();
|
18 |
$( "#imgdiv img" ).not($( "#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")" )).hide();
|
19 |
}
|
20 |
if (pageindex == 1) {
|
21 |
$( "#imgdiv img:lt(" + pagesize + ")" ).show();
|
22 |
$( "#imgdiv img" ).not($( "#imgdiv img:lt(" + pagesize + ")" )).hide();
|
23 |
}
|
24 |
}
|
25 |
}
|
26 |
function next() {
|
27 |
var p = $( "#imgdiv img" ).length / pagesize;
|
28 |
29 |
var pagecount = parseInt(Math.ceil(p));
|
30 |
31 |
if (pageindex + 1 > pagecount) {
|
32 |
pageindex = pagecount;
|
33 |
} else {
|
34 |
pageindex++;
|
35 |
}
|
36 |
$( "#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")" ).show();
|
37 |
$( "#imgdiv img" ).not($( "#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")" )).hide();
|
38 |
}
|
39 |
</script>
|
40 |
<div> |
41 |
<a href= "javascript:previous()" >上一页</a>
|
42 |
<div id= "imgdiv" >
|
43 |
<img src= "/images/001.jpg" alt= "第一页的第一张" />
|
44 |
<img src= "/images/002.jpg" />
|
45 |
<img src= "/images/003.jpg" />
|
46 |
<img src= "/images/004.jpg" />
|
47 |
<img src= "/images/005.jpg" />
|
48 |
</div>
|
49 |
<a href= "javascript:next()" >下一页</a>
|
50 |
</div>
|
jQuery客户端分页的更多相关文章
-
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
-
转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
-
12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
-
12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
-
BootStrap-table 客户端分页和服务端分页的区别
当服务器没有对数据进行分页时,前端页面设计又要求进行分页,要分开来设置. 服务端分页: responseHandler: function(data){ return data.response; } ...
-
分享一个手机端好用的jquery ajax分页类
分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...
-
jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.c ...
-
SpringMVC -jquery实现分页
效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...
随机推荐
-
php 网页 301 跳转
php 跳转 if('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] =="http://www.nikemalaysia.co ...
-
windows2008R2安全加固
一.更改终端默认端口号 步骤: 1.运行regedit 2.[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\W ...
-
[HTML]js定时器使用 setInterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 s ...
-
hdu 3172
http://acm.hdu.edu.cn/showproblem.php?pid=3172 题意:输出每对朋友的关系网大小 并查集的时候维护一个数组记录根节点的大小即可,水题,这题坑在T组数据这个也 ...
-
SQL Server 2008数据类型
在创建表时,必须为表中的每列指派一种数据类型. 今天在研究二进制存储图片时候竟然不知道image类型就是二进制类型?!所有就搜集了sql中的各种数据类型汇总,成功在于点滴积累. 1. 字符数据类型 数 ...
-
mysql生成百万级数量测试数据
今天因为项目需要,想测试一下读取百万级数量数据的速度如何,无奈数据库没有现成符合要求的数据,网上百度一番有很都不错的文章,但是需要涉及到一些存储过程和用php代码什么的,虽说可以实现,但是感觉另外再弄 ...
-
Go语言中的闭包
一.函数的变量作用域和可见性 1.全局变量在main函数执行之前初始化,全局可见 2.局部变量在函数内部或者if.for等语句块有效,使用之后外部不可见 3.全局变量和局部变量同名的情况下,局部变量生 ...
-
IntelliJ Idea 2017 免费激活方法
1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...
-
ionic3 Loading组件的用法
import { LoadingController } from 'ionic-angular'; @Component({ selector: 'page-contact', templateUr ...
-
qt 安装包生成2
使用Qt Installer Framework制作安装包 2018年07月01日 03:45:37 大黄老鼠 阅读数:878 标签: qt更多 个人分类: Qt 版权声明:本文为博主原创文章,未 ...