<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <title>网页特效 静态代码的分页效果 </title> <style type="text/css"> li{display:none} </style> </head> <body> <ul id="box"> <li>静态网页分页效果01页</li> <li>静态网页分页效果02页</li> <li>静态网页分页效果03页</li> <li>静态网页分页效果04页</li> <li>静态网页分页效果05页</li> <li>静态网页分页效果06页</li> <li>静态网页分页效果07页</li> <li>静态网页分页效果08页</li> <li>静态网页分页效果09页</li> <li>静态网页分页效果10页</li> <li>静态网页分页效果11页</li> <li>静态网页分页效果12页</li> <li>静态网页分页效果13页</li> <li>静态网页分页效果14页</li> <li>静态网页分页效果15页</li> <li>静态网页分页效果16页</li> <li>静态网页分页效果17页</li> <li>静态网页分页效果18页</li> <li>静态网页分页效果19页</li> <li>静态网页分页效果20页</li> </ul> <div id="page"></div> <script language="javascript"> var obj,j; var page = 0; var currentPage = 0;//当前页 var listNum = 2;//每页显示<ul>数 var PagesLen;//总页数 var PageNum = 4;//分页链接接数(5个) window.onload = function(){ obj = document.getElementById("box").getElementsByTagName("li"); j = obj.length//li的个数 PagesLen = Math.ceil(j / listNum);//总页数 upPage(0) } function upPage(p){ currentPage = p //内容变换 for (var i = 0; i < j; i++){ obj[i].style.display="none" } for (var i = p * listNum; i < (p+1) * listNum; i++){ if(obj[i])obj[i].style.display = "block"; console.log(i); } //分页链接变换 var strS = '<a href="###" onclick="upPage(0)">首页</a> ';//首页 var PageNum_2 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2)+1 : Math.ceil(PageNum / 2); var PageNum_3 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2) : Math.ceil(PageNum / 2) + 1; console.log(PageNum_2,PageNum_3); var strC = "",startPage,endPage; if (PageNum >= PagesLen) { startPage = 0; endPage = PagesLen - 1; }else if (currentPage < PageNum_2){ startPage = 0; endPage = PagesLen - 1 > PageNum ? PageNum : PagesLen - 1; }else { startPage=(currentPage+PageNum_3 >= PagesLen) ? PagesLen-PageNum - 1 : currentPage-PageNum_2 + 1; var t = startPage + PageNum; endPage =(t > PagesLen) ? PagesLen - 1 : t; } console.log(startPage,endPage); for (var i = startPage;i <= endPage; i++){ if (i == currentPage)strC += '<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> ' else strC += '<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> ' } var strE = ' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> ';//尾页 var strE2 = currentPage + 1 + "/" + PagesLen + "页" + " 共" + j + "条" ;//共*条 document.getElementById("page").innerHTML = strS + strC + strE + strE2; } </script> </body> </html>