<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta charset="utf-8" />

<title>next page last page</title>

<style type="text/css">

.med_pagebtn {margin-top: 20px;padding: 0 20px;font-size: 1.4rem;}

.med_pagebtn span {width: 45%;display: inline-block;height: 30px;line-height: 30px;text-align: center;color: #FFF;font-size: 1.5rem;}

.prevbtn {float: left;background: #CCC;}

.nextbtn {float: right;background: #10abfe;}

.live {background: #10abfe;}

.dead {background: #CCC;}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

    var pageArray = [ 111, 222, 333, 444, 555 ];

    var _thisValue = 111;

    // 取当前值得下标，不存在时返回 -1

    pageArray.indexof = function(value) {

        for (var i = 0; i < this.length; i++) {

            if (this[i] == value)

                return i;

        }

        return -1;

    }

    // 取当前值的下一个值，不存在时返回 undefined

    pageArray.nextvalue = function(value) {

        var next = -1;

        for (var i = 0; i < this.length; i++) {

            if (this[i] == value)

                next = i + 1;

            if (next == i)

                return this[i];

        }

        return undefined;

    }

    // 取当前值的上一个值，不存在时返回 undefined

    pageArray.prevvalue = function(value) {

        var prev = -1;

        for (var i = this.length - 1; i > -1; i--) {

            if (this[i] == value)

                prev = i - 1;

            if (prev == i)

                return this[i];

        }

        return undefined;

    }

    // 初始化上一页下一页显示状态

    function initPage() {

        $("#" + _thisValue).show();

        $("#" + _thisValue).siblings().hide();

        if (pageArray.length == 1) {

            $("#prevPage").removeClass("live").addClass("dead");

            $("#nextPage").removeClass("live").addClass("dead");

        } else {

            $("#prevPage").removeClass("live").addClass("dead");

            $("#nextPage").removeClass("dead").addClass("live");

        }

        $("#pageGroup").show();

    }

    // 点击下一页

    function nextPage() {

        var nextValue = pageArray.nextvalue(_thisValue);

        if (nextValue) {

            $("#" + nextValue).show();

            $("#" + nextValue).siblings().hide();

            if (pageArray.indexof(nextValue) == pageArray.length - 1) {

                $("#nextPage").removeClass("live").addClass("dead");

            } else {

                $("#nextPage").removeClass("dead").addClass("live");

            }

            $("#prevPage").removeClass("dead").addClass("live");

            _thisValue = nextValue;

        }

        $("#pageGroup").show();

    }

    // 点击上一页

    function prevPage() {

        var prevValue = pageArray.prevvalue(_thisValue);

        if (prevValue) {

            $("#" + prevValue).show();

            $("#" + prevValue).siblings().hide();

            if (pageArray.indexof(prevValue) == 0) {

                $("#prevPage").removeClass("live").addClass("dead");

            } else {

                $("#prevPage").removeClass("dead").addClass("live");

            }

            $("#nextPage").removeClass("dead").addClass("live");

            _thisValue = prevValue;

        }

        $("#pageGroup").show();

    }

    $(function() {

        initPage();

    });

</script>

</head>

<body>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="111">111</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="222">222</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="333">333</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="444">444</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="555">555</div>

    <div class="med_pagebtn" id="pageGroup">

        <span class="prevbtn" id="prevPage" onclick="prevPage()">上一页</span>

        <span class="nextbtn" id="nextPage" onclick="nextPage()">下一页</span>

    </div>

</body>

</html>

效果图：

page next page prev的更多相关文章

  1. mysql 数据库封装类：返回索引、关联、字符串数组；分页查询封装类 ：$page=new Page(表的总条数,每页的条数);$sql = "".$page->limit; echo $page->fpage();

    <?php class czy { public $host="localhost"; //地址 public $uid="root"; //用户名 pu ...

  2. Page in/Page out/Page fault

    Paging refers to writing portions, termed pages, of a process' memory to disk. Swapping, strictly sp ...

  3. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  4. 转载 SharePoint 2013配置Master Page and Page Layout

    转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...

  5. SharePoint 2013 Deploy Master Page And Page Layout

    2013年9月27日的一篇随笔,其实也是自己编写的部署文档,由于客户是HK的,所以描述部分是用英文. 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. First, L ...

  6. datatable：dt.page(dt.page()).draw(false)

    dt.page(dt.page()).draw(false);该方法可以直接返回到当前页,不用重新绘制table 描述 分页是DataTables的一个核心功能,并且该方法提供对表格显示页面的外部控制 ...

  7. selenium page object & Page Factory

    package demo; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa ...

  8. linux杂记（四）热键[Tab],[ctrl]-c,[ctrl]-d，在线求助man page/info page

    [Tab]按键 他具有[命令补全](接在一串指令的第一个字后面)与[档案补齐](接在第一串指令的第二字以后时)的功能.如 [KANO@kelvin ~]$ ca[tab][tab] cabextrac ...

  9. JSP基本语法--Page指令 <%@page 属性=”内容“%>

    page指令语法:<%@page 属性=”内容“%> 常用:contentType,import,pageEncoding 例子,设置MIME属性,如果使用一些高版本的tomcat,可能自 ...

随机推荐

  1. PyQt 5控件

    PyQt 5控件包括:按钮.复选框.滑动条.列表框等 复选框QCheckBox QCheckBox复选框控件,它有两个状态:打开和关闭,他是一个带有文本标签(Label)的控件.复选框常用于表示程序中 ...

  2. oracle 索引使用小结

    1. 普通索引 create index my_index on test (col_1); 可创建合并两列或多列的索引,最多可将32列合并在一个索引中(位图索引最多可合并30列) create in ...

  3. Apache 的编译安装

    直接看步骤: 1.安装必备环境:gcc.pcre .................................. 2.安装apr.apr-util 3.解压编译安装Apache: ./confi ...

  4. 浅谈OPP

    了解Java或C#等面向对象编程语言的的程序员比较熟悉类和对象以及OOP. 一谈起OOP,就会想起教科书式的OOP概念:封装.继承.多态.粗浅的解释封装就是对数据进行隐藏:继承就是子类继承父类(cla ...

  5. 华为交换机S5700设置远程ssh telnet登录

    AAA是指:authentication(认证).authorization(授权).accounting(计费)的简称,是网络安全的一种管理机制:Authentication是本地认证/授权,aut ...

  6. FTP服务器（SOCKET）返回异常 500 Command not understood

    出现着这样的问题,一般是NLST中的参数包含特殊字符,如"\n",所以在发送SOCKET命令时,一定要检查命令参数的合法性.

  7. **利用列表和super实现有序字典

    class MyDict(dict): def __init__(self): self.temp_list = [] super(MyDict,self).__init__() def __seti ...

  8. 利用同步辅助类CountDownLatch计算多线程的运行时间

    一.CountDownLatch jdk提供的一个同步辅助类,在完成一组在在其他线程中执行的操作前,允许一个或者多个其他的线程等待,通过调用 await() 方法阻塞,直到由于 countDown() ...

  9. 字符编码 ASCII,Unicode和UTF-8的关系

    转自:http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143166410626 ...

  10. 关于IP4上WIFI设置静态IP的一点经验

    一开始我设置IP4的WIFI的"静态"IP地址后,又查看了一下"BootP"或者"DHCP"选项,然后保存退出(关键错误,后有说明),再进W ...