<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery伪分页效果</title>
<script src="http://campus.alibaba.com/assets/lib/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(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);//当前的页数
                                          
            //下一页
            $(".next").click(function(){
                if(current_num==7){
                        return false;//如果大于总页数就禁用下一页
                    }
                    else{
                        $(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
                        $.each($('ul li'),function(index,item){
                            var start = current_page* (current_num-1);//起始范围
                            var end = current_page * current_num;//结束范围
                            if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
                                $(this).show();
                            }else {
                                $(this).hide();
                            }
                        });
                    }
            });
            //上一页方法
            $(".prev").click(function(){
                    if(current_num==1){
                        return false;
                    }else{
                        $(".current_page").text(--current_num);
                        $.each($('ul li'),function(index,item){
                            var start = current_page* (current_num-1);//起始范围
                            var end = current_page * current_num;//结束范围
                            if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐藏
                                $(this).show();
                            }else {
                                $(this).hide();
                            }
                        });    
                    }
                                                  
                })
    })
</script>
<style type="text/css">
    .main{width:800px;zoom:1;margin:0 auto;}
    .item{width:800px;overflow:hidden;}
    ul{padding:0;width:860px;zoom:1;}
    .clear{zoom:1;}
    .clear:after{content:"";display:block;height:0;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;}
</style>
</head>
                              
<body>
    <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-->
</body>
</html>

JS实现分页效果的更多相关文章

  1. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  2. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  3. 关于js实现分页效果的简单代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 原生js显示分页效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 原生js实现分页效果（带实例）

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  6. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  7. 【js】使用javascript 实现静态网页分页效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...

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

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

  9. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

随机推荐

  1. IOS开发的哪些异常之异常断点

    从Android开发的异常报错到IOS的异常闪退,经历了不一样的处理过程.对于IOS的异常报错刚開始总是非常茫然,永远仅仅告诉你有异常.然后就跳到main.m文件,却不曾我告诉她在那出现.真是吊人胃口 ...

  2. Linux线程相互排斥量--进程共享属性

    多线程中.在相互排斥量和 读写锁的 属性中.都有一个叫 进程共享属性 . 对于相互排斥量,查询和设置这个属性的方法为: pthread_mutexattr_getpshared pthread_mut ...

  3. vim 插件之solarized

    solarized 其实算不上严格的插件,它只是一个主题,这个主题看起来还是很不错的.有一点,因为vim的最终效果还跟ubuntu终端配色有关,所以我们还需要进行其他的设置.具体过程如下 1．更改终端 ...

  4. rest_framework-节流-总结完结篇

    列表从后往前读 #1.在request中获取IP#2.访问记录 VISIT_RECORD = {} 放缓存 数据库 都可以 建议缓存import timeclass VisitThrottle(obj ...

  5. 5.QT制作编译器,可以简单支持中文编程

    学习了文件操作,那么先做一个自制的IDE吧,就是简单的读取,修改,保存文件,使用QT语言,附上github的代码:QT基本文件操作实现中文编程 截图: 运行效果

  6. 1 QT设置背景色

    首先需要添加头文件#include <QPalette> 然后接下来这样操作: 控件.setAutoFillBackground(true); //这里的控件就是你要设置背景颜色的控件 Q ...

  7. Java类和对象11

    首先,编写一个类ChongZai,该类中有3个重载的方法void print():其次,再编写一个主类来测试ChongZai类的功能. public class ChongZai { public v ...

  8. codeforces 540 B School Marks【贪心】

    题意:一共n个数,给出其中k个数,要求这n个数的中位数为y,这n个数的和不超过x,补全剩下的n-k个数 先统计给出的k个数里面比中位数小的数, 如果cnt<=n/2,说明中位数还没有出现,把这n ...

  9. HDU 1166 敌兵布阵（线段树单节点更新 区间求和）

    http://acm.hdu.edu.cn/showproblem.php?pid=1166 Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Dere ...

  10. CodeForces 383C Propagating tree

    Propagating tree Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForces ...