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 @ 2011-12-25 02:10  韩梦芫  阅读(442)  评论(0编辑  收藏  举报