page next page prev

<!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=" 100%; height: 200px; margin: 10px; background-color: gray;" id="111">111</div>
    <div style=" 100%; height: 200px; margin: 10px; background-color: gray;" id="222">222</div>
    <div style=" 100%; height: 200px; margin: 10px; background-color: gray;" id="333">333</div>
    <div style=" 100%; height: 200px; margin: 10px; background-color: gray;" id="444">444</div>
    <div style=" 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>
效果图：