<!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. Spark-1.5.2安装--Standalone和Yarn

    Spark Standalone 1.下载scala-2.10.6包解压到指定目录,添加环境变量 #SCALA VARIABLES START export SCALA_HOME=/usr/local ...

  2. Intellij解决版本冲突时，merge界面各区块颜色区分

    灰色:删除 蓝色:改变 绿色:新增 红色:冲突

  3. Vue基础知识之常用属性和事件修饰符（二）

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

  4. C++中的运算符重载练习题

    1.RMB类 要求: 定义一个RMB类 Money,包含元.角.分三个数据成员,友元函数重载运算符‘+’(加)   和 ‘-’(减),实现货币的加减运算     例如:    请输入元.角 分:    ...

  5. mysql数据库忘记密码时如何登录

    1.打开cmd命令提示符,进入上一步mysql.exe所在的文件夹即: 2.输入命令  mysqld --skip-grant-tables  回车,此时就跳过了mysql的用户验证 3.然后直接输入 ...

  6. Rhythmk 一步一步学 JAVA (14) Spring-3 @Autowired,@Qualifier @Required @Resource @Component,@Service,@Controller,@Repository @PostConstruct,@PreDestroy

    1.@Autowired 注解:首先在使用时候需要引入配置: <!-- 该 BeanPostProcessor 将自动起作用,对标注 @Autowired 的 Bean 进行自动注入 --> ...

  7. HTTP断点续传下载的原理

    frombegintoend原文HTTP断点续传下载的原理 要实现断点续传下载文件,首先要了解断点续传的原理.断点续传其实就是在上一次下载断开的位置开始继续下载,HTTP协议中,可以在请求报文头中加入 ...

  8. 11.redis连接

    转自:http://www.runoob.com/redis/redis-tutorial.html Redis 客户端连接 Redis 通过监听一个 TCP 端口或者 Unix socket 的方式 ...

  9. 【297】IDL 过程、函数&关键字参数

    目录: 一.Procedure 1.1 基本说明&定义 1.2 关键字参数 二.Function 2.1 基本说明&定义 2.2 关键字参数 参考:IDL中函数中的带有关键字的参数的使 ...

  10. 从零开始构建一个的asp.net Core 项目（一）

    最近突发奇想,想从零开始构建一个Core的MVC项目,于是开始了构建过程. 首先我们添加一个空的CORE下的MVC项目,创建完成之后我们运行一下(Ctrl +F5).我们会在页面上看到“Hello W ...