<!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>
效果图：
