如图,我们首先分析在一个页面存放4条内容,其余的超出隐藏(因为这里没有后台数据,所以我们把内容‘写死’),然后就是下面两个按钮(这里我们不用button,因为button有自带的提交功能),然后我们可以把首页写成1,总页数使用JQ实现,为此,我们先把页面跟样式写好

<div class="main">
<div class="item">
<ul class="clear">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
</ul>
</div>
<div class="page_btn clear">
<span class="page_box">
<a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
</span>
</div>
</div>
 .main{
width:800px;
zoom:;
margin:0 auto;
}
.item{
width:800px;
overflow:hidden;
}
ul{
padding:;
width:860px;
zoom:;
}
.clear{
zoom:;
}
.clear:after{
content:"";
display:block;
height:;
clear:both;
visibility:hidden;
}
ul li{
list-style-type:none;
float:left;
background:#F69;
font-size:60px;
text-shadow:1px 1px 3px #555;
width:380px;
height:200px;
margin:10px 40px 10px 0;
line-height:200px;
text-align:center;
color:#fff;
}
.page_btn{
padding-top:20px;
}
.page_btn a{
cursor:pointer;
padding:5px;
border:solid 1px #ccc;
font-size:12px;
}
.page_box{
float:right;
}
.num{
padding:0 10px;
}

这样我们写出来的效果应该是这样,然后我们在去写它的逻辑

$(document).ready(function(){
$("ul li:gt(3)").hide();//初始化,前面4条数据显示,其他的数据隐藏。
var total_q=$("ul li").index()+1;//总数据
var current_page=4;//每页显示的数据
var current_num=1;//当前页数
var total_page= Math.round(total_q/current_page);//总页数
var next=$(".next");//下一页
var prev=$(".prev");//上一页
$(".total").text(total_page);//显示总页数
$(".current_page").text(current_num);//当前的页数

我们可以先规定一页只显示4条数据,其余的隐藏,让后在把当前页数跟总页数显示出来,最后,我们再去实现“上一页”“下一页”,在上一页中,我们判断在第一页的时候就停止,而“下一页”,我们判断在最后一页时就停止,所以

$('.next').on('click',function(){
if(current_num==7){
return false;
}else{
$('.current_page').text(++current_num);
$.each($('ul li'), function(index) {
var start = current_page * (current_num - 1);
var end = current_page * current_num;
if(index >= start && index<end){
$(this).show()
}else{
$(this).hide();
}
});
}
});
$('.prev').on('click',function(){
if(current_num == 1){
return false;
}else{
$('.current_page').text(--current_num);
$.each($('ul li'), function(index) {
var start = current_page * (current_num+1);
var end = current_page * current_num;
if(index <= start && index > end){
$(this).show()
}else{
$(this).hide();
}
});
}
})

其实,页数跟内容不是固定的,在项目中,这些数据都会从后台反馈给你的

jQuery伪分页效果的更多相关文章

  1. 使用Jquery做分页效果

    之前写过一个PHP 的分页效果,但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页,整理了一下,代码如下: html: <div id="containet"> ...

  2. jquery实现分页效果

    通过jq实现分页的原理如下:将所有条数加载到页面中,根据每页放特定条数(例如 5 条)获取jquery对象索引,使部分条数显示,其他条数隐藏. 前提:引入jquery.js 代码 <!DOCTY ...

  3. JS实现分页效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. SpringMVC -jquery实现分页

    效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...

  5. jquery动态分页

    最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...

  6. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  7. 5种风格的 jQuery 分页效果【附代码】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. 基于jquery 的分页插件,前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  9. 使用jQuery Pagination Plugin实现分页效果

    最近使用分页这个基础效果较为频繁,而项目前端页面使用的是纯静态的HTML,自己之前写的JSP中的分页就用不成了:项目中也引入了Bootstrap,本来想使用Bootstrap中的分页样式,但发现其样式 ...

随机推荐

  1. 洛谷 P1457 城堡 The Castle

    P1457 城堡 The Castle 题目描述 我们憨厚的USACO主人公农夫约翰(Farmer John)以无法想象的运气,在他生日那天收到了一份特别的礼物:一张“幸运爱尔兰”(一种彩票).结果这 ...

  2. Ubuntu 16.04 GNOME无法使用拼音输入法问题

    说明:添加好之后重启!不然会出现输入错乱的问题. 参考: http://forum.ubuntu.org.cn/viewtopic.php?t=477765

  3. 什么是Wiki?

    Wiki一词来源于夏威夷语的“wee kee wee kee”, 发音wiki, 原本是“快点快点”的意思,被译为“维基”或“维客”.一种多人协作的写作工具.Wiki站点可以有多人(甚至任何访问者)维 ...

  4. 表单验证的完美解决方案Validform

    具体使用方法参考官网介绍吧,相当的简单: 文档:http://validform.rjboy.cn/document.html demo:http://validform.rjboy.cn/demo. ...

  5. Hadoop 知识

    Map Reduce & YARN 简介 Apache Hadoop 是一个开源软件框架,可安装在一个商用机器集群中,使机器可彼此通信并协同工作,以高度分布式的方式共同存储和处理大量数据.最初 ...

  6. Android Wear - App Structure for Android Wear(应用结构)

    ---------------------------------------------------------------------------------------------------- ...

  7. JavaSE入门学习5:Java基础语法之keyword,标识符,凝视,常量和变量

    一keyword keyword概述:Java语言中有一些具有特殊用途的词被称为keyword.keyword对Java的编译器有着特殊的意义.在程 序中应用时一定要谨慎. keyword特点:组成k ...

  8. 1062. Talent and Virtue (25)【排序】——PAT (Advanced Level) Practise

    题目信息 1062. Talent and Virtue (25) 时间限制200 ms 内存限制65536 kB 代码长度限制16000 B About 900 years ago, a Chine ...

  9. qt-qml移动开发之在ios上开发和部署app流程简单介绍

    qt5.3已经全面支持移动开发,除了mac,windows,linux.还支持ios,android,wp,meego等移动平台,本教程是作者依据自己的经验,从头讲怎么样在ios上公布自己的app.因 ...

  10. Ubuntu安装JDK及环境变量配置(sun java)

    捣鼓了尽一天的时间,终于把sun的java安装上了,不是openjava了,网上试了好多的方法好多都是不可以的,所以当自己成功后就立马把方法贴出来,以方便后来者少走弯路,此文的方法绝对可行! 这里先简 ...