javascript分页代码

jyy00713692

于 2009-07-04 00:41:49 发布

阅读量200

点赞数

分类专栏： javascript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.youkuaiyun.com/jyy00713692/article/details/83426667

版权

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单分页插件，该插件能够动态加载图片，并通过按钮控制来实现前后翻页及跳转到指定页的功能。文章详细展示了如何设置每页显示的图片数量、总图片数量等参数，并提供了完整的HTML与JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Javascript分页</title>
<script type="text/javascript">
var page=1;
var pagesize=2;//每页显示数量
var picnum=9;//图片总数量
var pagenum;
var showpage='';
var showpage1='';
function showpic(no) {
page=no;
pagenum=picnum/pagesize;
if (picnum%pagesize>0) pagenum=parseInt(picnum/pagesize)+1;
document.getElementById("img").innerHTML='';
for (i=1;i<=picnum;i++){
if(i > (page-1)*pagesize && i<=page*pagesize){
document.getElementById("img").innerHTML+='<img src='+i+'.jpg>';
}
}
if (page>1){
showpage='<a href="javascript:showpic(1);">首页</a> <a href="javascript:showpic('+(page-1)+');">上一页</a>'
}else{
showpage='';
}
if (page<pagenum){
showpage1=' <a href="javascript:showpic('+(page+1)+');">下一页</a> <a href="javascript:showpic('+pagenum+');">尾页</a> '
}else{
showpage1='';
}
document.getElementById("pages").innerHTML='页次：'+page+'/<font color=red>'+pagenum+'</font> 共：<font color=red>'+picnum+'</font> 条 '+showpage+showpage1;
}
window.οnlοad=function(){
showpic(1);
}
</script>
</head>

<body>
<div id="img"></div>
<div id="pages"></div>
</body>
</html>