JavaScaript实现图片分页

<script type="text/javascript">
var page = 1; //当前页面
var pagesize = 2; //每页显示数量
var picnum = 18; //图片总数量
var pagenum; //总页面数
var showpage = '';
var showpage1 = '';
 
function showpic(no) {
document.getElementById("img").innerHTML = "";
page = no;
pagenum = picnum / pagesize;
if (picnum % pagesize > 0) pagenum = parseInt(picnum / pagesize) + 1;
var tbStr = '<center><table><tr>';
for (i = 1; i <= picnum; i++) {
 
if (i > (page - 1) * pagesize && i <= page * pagesize) {
 
tbStr += '<TD><BR><BR><img src="Images/' + i + '.jpg" width="320px" height="524px" />' + '<p >墓志铭' + i + '</p> </TD>';
 
if (i % 2 == 0) {
tbStr += '</TR><tr>';
}
}
}
tbStr=tbStr.substring(0, tbStr.length - 4);
tbStr += '</table></center>';
document.getElementById("img").innerHTML += tbStr;
if (page > 1) {
showpage = '<div > <a href="javascript:showpic(' + (page - 1) + ');">  上一页  </a> <a href="javascript:showpic(1);">首页  </a></div>'
} else {
showpage = '';
}
if (page < pagenum) {
showpage1 = ' <div > <a href="javascript:showpic(' + pagenum + ');">  尾页  </a> <a href="javascript:showpic(' + (page + 1) + ');">下一页  </a></div> '
} else {
showpage1 = '';
}
document.getElementById("pages").innerHTML = '页次:' + page + '/<font color=red>' + pagenum + '</font> 共:<font color=red>' + picnum + '</font> 幅图 ' +showpage1 +showpage ;
}
window.onload = function () {
showpic(1);
}
</script>
 
<BODY>
 
div id="img"></div>
 
<div id="pages"></div>
 
</BODY>
 
 源文件 http://www.cnblogs.com/siyunianhua/admin/Files.aspx

  

posted @   韩梦芫  阅读(443)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示