本文目录一览：
JS分页代码?
script language=”javascript”
!–
function showPageLink(sUrl,iPage,iCount){
var i;
i=Math.max(1,iPage-1);
if(iPage==1){
document.write(“span style=’color:#7D7D7D’FONT face=Webdings9/FONT/span “);
document.write(“span style=’color:#7D7D7D’FONT face=Webdings7/FONT/span “);
}
else{
document.write(“a href=\”” + sUrl + “1\” title=’第 1 页’FONT face=Webdings9/FONT/a “);
document.write(“a href=\”” + sUrl + i + “\” title=’上一页(第 ” + i + ” 页)’FONT face=Webdings7/FONT/a “);
}
if(iPage6) document.write(“span style=’font-size:8px’···/span “);
for(i=Math.max(1,iPage-5);iiPage;i++){
document.write(“a href=\””+sUrl + i + “\” title=’第 ” + i + ” 页’b” + i + “/b/a “);
}
document.write(“font color=’#ff3333’b” + iPage + “/b/font “);
for(i=iPage+1;i=Math.min(iCount,iPage+5);i++){
document.write(“a href=\””+sUrl + i + “\” title=’第 ” + i + ” 页’b” + i + “/b/a “);
}
i=Math.min(iCount,iPage+1);
if(iCountiPage+5) document.write(“span style=’font-size:8px’···/span “);
if(iPage==iCount){
document.write(“span style=’color:#7D7D7D’FONT face=Webdings8/FONT/span “);
document.write(“span style=’color:#7D7D7D’FONT face=Webdings:/FONT/span “);
}
else{
document.write(“a href=\”” + sUrl + i + “\” title=’下一页(第 ” + i + ” 页)’FONT face=Webdings8/FONT/a “);
document.write(“a href=\”” + sUrl + iCount + “\” title=’最后一页(第 ” + iCount + ” 页)’FONT face=Webdings:/FONT/a “);
}
}
showPageLink(“%=selfname%?page=”,%=page%,%=totalpage%);
//–
/script
其中selfname为该页面的文件路径
page为当前页
totalpage为总页数
javascript如何实现div分页呢？
主要思路：就是点击当前页时，它自己显示，其它的都隐藏；
下面是简单的代码实现：
style
input.active {background:yellow;}
div {width:200px; height:200px; border:1px solid red; display:none;}
div.active {display:block;}
/style
script
window.onload=function(){
var aBtn = document.getElementsByTagName(‘input’);
var aDiv = document.getElementsByTagName(‘div’);
for(var i =0; iaBtn.length;i++)
{
(function(index){ //因为要存储点击的下标，所以需要做一个参数引入。学名叫’自执行匿名函数’。
aBtn[i].onclick=function(){
//这个for循环的作用是将所以的都隐藏。
for(var i =0; iaBtn.length;i++)
{
aBtn[i].className=”;
aDiv[i].className=”;
}
//这是将当前点击的显示。
this.className=’active’;
aDiv[index].className=’active’;
};
})(i);
}
};
/script
/head
body
input type=”button” value=”111″ class=’active’ /
input type=”button” value=”222″ /
input type=”button” value=”333″ /
div class=”active”11111111111/div
div22222222222/div
div33333333333/div
/body
怎么用js来实现页面的分页，有案列代码吗？请给个代码看看，谢谢
分屏加载吧 滑到哪加载哪
从网页头引入两个js文件，注意必须先放jquery的
[javascript] view plaincopy
script src=”css/infinite-scroll/jquery-1.6.4.js”/script
script src=”css/infinite-scroll/jquery.infinitescroll.js”/script
2.之后在网页头自己写一个js脚本
[javascript] view plaincopy
script
$(document).ready(function (){
$(“#container”).infinitescroll({
navSelector: “#navigation”, //页面分页元素–本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: “#navigation a”, //下一页的导航
itemSelector: “.scroll ” , //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
animate: true, //加载时候时候需要动画，默认是false
maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
});
});
/script
3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助
[html] view plaincopy
%@ page language=”java” contentType=”text/html; charset=utf-8″
pageEncoding=”utf-8″%
!DOCTYPE html
html
head
meta charset=”utf-8″
title无限翻页效果/title
script src=”css/infinite-scroll/jquery-1.6.4.js”/script
script src=”css/infinite-scroll/jquery.infinitescroll.js”/script
script src=”css/infinite-scroll/test/debug.js”/script
script
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$(“#container”).infinitescroll({
navSelector: “#navigation”, //页面分页元素–成功后自动隐藏
nextSelector: “#navigation a”,
itemSelector: “.scroll ” ,
animate: true,
maxPage: 3,
});
});
/script
/head
body
div id=”container” !– 容器 —
div class=”scroll” !– 每次要加载数据的数据块–
第一页内容第一页内容br
第一页内容br第一页内容br第一页内容br
第一页内容br第一页内容br第一页内容br
第一页内容br第一页内容br第一页内容
/div
/div
div id=”navigation” align=”center” !– 页面导航–
a href=”user/list?page=1″/a !– 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。–
/div
/body
/html
原创文章，作者：HEGE，如若转载，请注明出处：https://www.506064.com/n/146682.html
微信扫一扫 
支付宝扫一扫 