<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>js分页</title><style type="text/css">div,ul,li,body { margin: 0; padding: 0; font-size: 12px; }#containet { display: inline-block; border: 1px solid #e1dede; padding: 19px; margin: auto;}#pageMain li { list-style: none; line-height: 22px;}#pageBox { padding: 10px 0 0 0; }#pageBox span { display: inline-block; width: 60px; height: 24px; line-height: 24px; text-align: center; color: #fff; background: #08a586;}#pageNav { display: inline-block; }#pageNav a { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; color: #08a586; text-decoration:none;}#pageNav a.active,#pageNav a:hover { background: #08a586; color: #fff;}</style></head><body>
<div id="containet"> <ul id="pageMain"> <li>这是内容标题 第1条</li> <li>这是内容标题 第2条</li> <li>这是内容标题 第3条</li> <li>这是内容标题 第4条</li> <li>这是内容标题 第5条</li> <li>这是内容标题 第6条</li> <li>这是内容标题 第7条</li> <li>这是内容标题 第8条</li> <li>这是内容标题 第9条</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> <li>这是内容标题 第21条</li> <li>这是内容标题 第22条</li> <li>这是内容标题 第23条</li> <li>这是内容标题 第24条</li> <li>这是内容标题 第25条</li> <li>这是内容标题 第26条</li> <li>这是内容标题 第27条</li> <li>这是内容标题 第28条</li> <li>这是内容标题 第29条</li> <li>这是内容标题 第30条</li> </ul> <div id="pageBox"> <span id="prev">上一页</span> <ul id="pageNav"> </ul> <span id="next">下一页</span> </div></div></body></html><script>window.onload = function(){ tabPage({ pageMain : 'pageMain', pageNav : 'pageNav', pagePrev: 'prev', pageNext: 'next', curNum: 7, //每页显示的条数 activeClass: 'active', //高光显示的class ini: 0 //初始化显示的页面 }); function tabPage(tabPage){ var pageMain = document.getElementById(tabPage.pageMain); //获取内容列表 var pageNav = document.getElementById(tabPage.pageNav); //获取分页 var pagePrev = document.getElementById(tabPage.pagePrev); //上一页 var pageNext = document.getElementById(tabPage.pageNext); //下一页 var curNum = tabPage.curNum; //每页显示数 var len = Math.ceil(pageMain.children.length / curNum); //计算总页数 var pageList = ''; //生成页码 var iNum = 0; //当前的索引值index for(var i = 0; i < len; i++){ pageList+='<a href="javascript:;">'+ ( i + 1)+'</a>'; } pageNav.innerHTML = pageList; pageNav.children[0].className = tabPage.activeClass; //头一页加高亮显示 for(var i = 0; i < pageNav.children.length; i++){ pageNav.children[i].index = i; pageNav.children[i].onclick = function(){ for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; } this.className = tabPage.activeClass; iNum = this.index; ini(iNum); }; } //下一页 pageNext.onclick = function(){ if(iNum == len - 1){ alert('已经是最后一页'); return false; }else{ for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; } iNum++; pageNav.children[iNum].className = tabPage.activeClass; ini(iNum); } }; //上一页 pagePrev.onclick = function(){ if(iNum == 0){ alert('当前是第一页'); return false; }else{ for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; } iNum--; pageNav.children[iNum].className = tabPage.activeClass; ini(iNum); } }; function ini(iNum){ for(var i = 0; i < pageMain.children.length; i++){ pageMain.children[i].style.display = 'none'; } for(var i = 0; i < curNum; i++){ if(pageMain.children[(iNum * curNum + i)] == undefined){ continue; } pageMain.children[(iNum * curNum + i)].style.display = 'block'; } } ini(iNum); }};</script>