<!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. kubernetes 核心原理

    3.1 K8s API Server 原理分析 K8s API server核心提供对各种资源对象的增.删.改.查以及Watch等HTTPRest接口,是集群内各个模块之间数据交互和通信的中心枢纽,是 ...

  2. eclipse安装使用注意点

    1.eclipse tomcat集成找不到server http://blog.csdn.net/wugangsunny/article/details/25246565 2.Eclipse java ...

  3. 记：cloudstack--gluster主存储上的一个文件损坏导致SSVM启动失败

    cloudstack的系统vm(ssvm不停的重建失败).- 1.cloudstack-management 的关键日志 这行 cannot read header 'mnt.......':Inva ...

  4. 硬盘IOPS与读写速度

    IOPS (Input/Output Per Second)即每秒的输入输出量(或读写次数),是衡量磁盘性能的主要指标之一.IOPS是指单位时间内系统能处理的I/O请求数量,一般以每秒处理的I/O请求 ...

  5. openssh 在32位、64位操作系统上的安装配置

    openssh是安装在windows系统上的提供SSH服务的服务端软件,可以提供安全的命令行远程连接管理.下面介绍下openssh成功安装使用的操作步骤. 工具/原料   openssh window ...

  6. Spring之导入和混合配置

    在典型的Spring应用中,我们可能会同时使用自动化和显式配置.即便你更喜欢通过JavaConfig实现显式配置,但有的时候XML却是最佳的方案.幸好在Spring中,这些配置方案都不是互斥的.你尽可 ...

  7. C++与C#有关对库（动态库dll,静态库.lib）文件的调用

    1 动态库的相互调用 1.1 C#调用C++ dll步骤(只能导出方法): 1. c++建立空项目->源文件文件夹中添加cpp文件和函数 2. c++属性设置中,配置类型设置为动态库dll,公共 ...

  8. 利用 Django admin 完成更多任务（转）

    利用 Django admin 完成更多任务   Django admin Django 为未来的开发人员提供了许多功能:一个成熟的标准库,一个活跃的用户社区,以及 Python 语言的所有好处.虽然 ...

  9. delphi 线程 TTask

    http://docwiki.embarcadero.com/Libraries/Seattle/en/System.Threading.TTask http://docwiki.embarcader ...

  10. 黑暗之光 Day3

    1. 滚动窗口 Scroll View. GameObject itemGo = NGUITools.AddChild(grid.gameObject, skillItemPrefab); grid. ...