JavaScaript实现图片分页

最新推荐文章于 2021-03-16 02:56:47 发布

dianjin3567

最新推荐文章于 2021-03-16 02:56:47 发布

阅读量140

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/siyunianhua/archive/2011/12/25/2300815.html

版权

<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

转载于:https://www.cnblogs.com/siyunianhua/archive/2011/12/25/2300815.html

dianjin3567

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScaript实现图片分页

<script type="text/javascript">var page = 1; //当前页面var pagesize = 2; //每页显示数量var picnum = 18; //图片总数量var pagenum; //总页面数var showpage = '';var showpage1 = '';function showp...
复制链接

扫一扫