<!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. 第七章 HTTP流量管理（二） URL 重写

    URL 重定向功能: 浏览器中输入  http://<host_name>:31380/v1/service-A/XXXX 经过下面的重定向,实际调用的是serviceA的/v1/XXXX ...

  2. Django 模型层(2)

    多表操作: 创建模型: 作者模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的关系(one-to-one) 出版商模型:出版商有名称,所在城市以及em ...

  3. 深入浅出 Java Concurrency (11): 锁机制 part 6 CyclicBarrier

      如果说CountDownLatch是一次性的,那么CyclicBarrier正好可以循环使用.它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).所谓屏障 ...

  4. SWFUpload初体验 For Struts1.x

    SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input ty ...

  5. datagridview绑定xml

    //加载描述的XML private bool loadXML() { //创建DataTable对象dt DataTable dt = new DataTable("clientXML&q ...

  6. PropertyGrid 重难点总结

    PropertyGrid的界面组成与不同部分的名称如下图所示. 本博文不算是自己写作的,只是将PropertyGrid中的几项十分有用的功能的应用方面的文字进行一下总结,希望以后大家对Property ...

  7. 跟我学算法-Logistic回归

    虽然Logistic回归叫回归,但是其实它是一个二分类或者多分类问题 这里的话我们使用信用诈骗的数据进行分析 第一步:导入数据,Amount的数值较大,后续将进行(-1,1)的归一化 data = p ...

  8. django网页的分页功能，大家如果有疑问请留言

    url文件 from django.contrib import admin from django.conf.urls import url from app01 import views urlp ...

  9. Directshow 判断音视频设备是否被占用<转>

    直接上代码吧: 代码是参考网上大神分享的,在原基础上做了些修改(只检测视频设备): int DeviceIsBusy(char *videoName) { //输入设备的音视频名称 HRESULT h ...

  10. iOS学习之UIDatePicker控件使用

    iOS上的选择时间日期的控件是这样的,左边是时间和日期混合,右边是单纯的日期模式. ,   您可以选择自己需要的模式,Time, Date,Date and Time  , Count Down Ti ...