87,997
社区成员
发帖
与我相关
我的任务
分享纯js分页，如何添加上一个，下一页！
拜托各位大神、大侠们，帮我实现一下，下一页上一页的功能，谢谢你们了！
<!DOCTYPE html PUBLIC "-//W3C//Da XHTML 1.0 liansitional//EN" "http://www.w3.org/li/xhtml1/Da/xhtml1-liansitional.da">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-综合特效-静态代码的分页效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.wrap{ width:500px; margin:0 auto; overflow:hidden; *zoom:1; text-align:center;}
#mydiv li{display:none; float:left; margin-left:10px;}
#changpage{ clear:both; float:left;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="wrap">
<ul id="mydiv">
<li><a>01</a></li>
<li><a>02</a></li>
<li><a>03</a></li>
<li><a>04</a></li>
<li><a>05</a></li>
<li><a>06</a></li>
<li><a>07</a></li>
<li><a>08</a></li>
<li><a>09</a></li>
<li><a>10</a></li>
<li><a>11</a></li>
<li><a>12</a></li>
<li><a>13</a></li>
<li><a>14</a></li>
<li><a>15</a></li>
<li><a>16</a></li>
<li><a>17</a></li>
<li><a>18</a></li>
<li><a>19</a></li>
<li><a>20</a></li>
<li><a>21</a></li>
<li><a>09</a></li>
<li><a>10</a></li>
<li><a>11</a></li>
<li><a>12</a></li>
<li><a>13</a></li>
<li><a>14</a></li>
<li><a>15</a></li>
<li><a>16</a></li>
<li><a>17</a></li>
<li><a>18</a></li>
<li><a>19</a></li>
<li><a>20</a></li>
<li><a>21</a></li>
<li><a>09</a></li>
<li><a>10</a></li>
<li><a>11</a></li>
<li><a>12</a></li>
<li><a>13</a></li>
<li><a>14</a></li>
<li><a>15</a></li>
<li><a>16</a></li>
<li><a>17</a></li>
<li><a>18</a></li>
<li><a>19</a></li>
<li><a>20</a></li>
<li><a>21</a></li>
<li><a>09</a></li>
<li><a>10</a></li>
<li><a>11</a></li>
<li><a>12</a></li>
<li><a>13</a></li>
<li><a>14</a></li>
<li><a>15</a></li>
<li><a>16</a></li>
<li><a>17</a></li>
<li><a>18</a></li>
<li><a>19</a></li>
<li><a>20</a></li>
<li><a>21</a></li>
</ul>
<div id="changpage"></div>
</div>
<script language="javascript">
var obj,j;
var page=0;
var nowPage=0;//当前页
var listNum=6;//每页显示<ul>数
var PagesLen;//总页数
var PageNum=4;//分页链接接数(5个)
onload=function(){
obj=document.getElementById("mydiv").getElementsByTagName("li");
j=obj.length
PagesLen=Math.ceil(j/listNum);
upPage(0)
}
function upPage(p){
nowPage=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"
}
//分页链接变换
sliS='<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
var sliC="",startPage,endPage;
if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
for (var i=startPage;i<=endPage;i++){
if (i==nowPage)sliC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '
else sliC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
}
sliE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> '
sliE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
document.getElementById("changpage").innerHTML=sliS+sliC+sliE+sliE2
}
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
a4321262 2013-03-07
- 打赏
- 举报
拜托各位了！555555555555
qq137051908 2013-03-07
- 打赏
- 举报
http://download.csdn.net/download/qq137051908/3541744
a4321262 2013-03-06
- 打赏
- 举报
我是个新手，对js不是很懂，你能帮我写下麽，结贴给你了
挨踢直男 2013-03-06
- 打赏
- 举报
//当点击分页时触发此事件。 一些外加的效果可以放在此处， 如加载数据
p.addListener( 'pageChanged', function() {
alert('第' + p.pageIndex + '页');
p.render();
} );a4321262 2013-03-06
- 打赏
- 举报
您好，这个分页效果很好，可是我不会添加数据，我不想alert 1、2、3数子之类的，你能帮改改你发的连接里面的代码，我想点击的时候，一个层里面显示的是文字之类的数据！ 谢谢了
挨踢直男 2013-03-06
- 打赏
- 举报
