<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= device-width, initial-scale = 1.0, user-scalable = no"> <title>Title</title> <link type="text/css" rel="stylesheet" href="css/style.css"/> <script type="text/javascript " src="js/jquery-1.11.3.min.js" ></script> </head> <body> <P>click me</P> <input class="indexBt" type="button" value="首页"> <input class="lastPage" type="button" value="上一页" onclick="lastPage()"> <span class="moreP">...</span> <ul class="pages"> <li class="curr">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <span class="moreN">...</span> <input class="nextPage" type="button" value="下一页" onclick="nextPage()"> <input class="finalPage" type="button" value="末页"> </body> <script > var total = 38; var curr = 1; var range = 2;//正常情况下当前页两边的数据位数 $(document).ready(function(){ $("li").click(function(){ var page = $(this).html(); console.log("target_page:"+page); }); }) function lastPage() { if(curr == 1){ alert("第一页"); }else{ curr = curr -1; $("li").removeClass(curr); loadPages(); } } function nextPage(){ if(parseInt(curr + 1) > total){ console.log("last page"); }else { $(".pages li").attr("class",""); // 改变页码数字 curr = parseInt(curr + 1); console.log("target_page:" + curr); // 修改当前所有页面数据 loadPages(); } } function loadPages(){ var start = curr - range; var end = curr + range; if(start <=0){ start = 1 ; end = 5; }else{ if(end > total){ end = total; start = total - 4; } } var html = ""; for(var i = start;i<=end;i++){ var pageNum = parseInt(i); if(curr == pageNum){ html = html + '<li class="curr">'+ pageNum +'</li>'; }else{ html = html + '<li>'+ pageNum +'</li>'; } } $(".pages").html(html); // 修改当前页显示效果 var currIndex = -1; $(".pages li").each(function(index,ele){ if($(ele).text() == curr){ currIndex = index; } }); $(".pages li").eq(currIndex).attr("class","curr"); if(curr ==1){ $(".moreP").hide(); $(".moreN").show(); }else if(curr == total){ $(".moreP").show(); $(".moreN").hide();; }else{ $(".moreP").show(); $(".moreN").show(); } console.log(currIndex); } $(".indexBt").click(function(){ curr =1; loadPages(); }) $(".finalPage").click(function(){ curr =total; loadPages(); }) </script> </html>