<!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;
60px;
height: 24px;
line-height: 24px;
text-align: center;
color: #fff;
background: #08a586;
}
#pageNav { display: inline-block; }
#pageNav a {
display: inline-block;
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>