- 论坛徽章:
- 1
|
[乔楚技术][原创][非PHP] JS做的批量图片展示程序
这几天给别人做了一个小的JavaScript的程序，来做批量图片的展示，完全支持FireFox和IE。
觉得查强人意，小show一下子。欢迎大家给出意见。因为刚做完，还没有做代码优化。
把以下代码，保存为test.htm，直接打开即可看到效果。
图片的分页和图片的编号的得到，使用正则表达式处理的。
- <html><body>
- <table width="750" border=0 align="center" background="images/bbg.gif" id="pTable" name="pTable">
- <tr id="pTr" name="pTr">
- <td id="pTd" name="pTd" width=150 height=150>
- <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td id="pTd" name="pTd" width=25> </td>
- <td id="pTd" name="pTd">
- <table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#FF6699">
- <tr>
- <td bgcolor="#FFFFFF" align=center valign=middle>{IMAGE}</td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td height="10" colspan="2" id="pTd" name="pTd"> </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- <script language=javascript>
- // --------------------------------------------------------------------------
- // File name : test.htm
- // Description : 图像浏览画册
- // Requirement : HTML+JavaScript
- //
- // Copyright(C), HonestQiao, 2005, All Rights Reserved.
- //
- // Author: HonestQiao (honestqiao@hotmail.com)
- //
- // --------------------------------------------------------------------------
- /// 设置每行显示多少个图片
- var LineNum = 4;
- /// 设置每页显示多少行图片
- var PageNum = 3;
- /// 设置图片的总数
- var ImgTotal = 80;
- /// 设置图片的基本网址
- var ImgBaseHref = "http://www.cfan.com.cn/pic/chahua/";
- /// 设置图片的缩略图后缀
- var imgThumb = ".gif";
- /// 设置图片的大图后缀
- var imgPicture = ".jpg";
- document.onLoad=autoCreatePictureList();
- function autoCreatePictureList()
- {
- var objpTable;
- var objpTr;
- var strTableOut;
- var strTableIn;
- var strTrOut;
- var strTrIn;
- var ColNum;
- var strTrOutModify;
- var strTrInModify;
- var strTableOutModify;
- var strTableInModify;
- var strPrev = "";
- var strNext = "";
- var strPage = "";
- var strBaseHref = "";
- if (navigator.userAgent.indexOf("MSIE") != -1)
- {
- objpTable = document.getElementById('pTable');
- objpTr = document.getElementById('pTr');
- strTableOut= objpTable.outerHTML;
- strTableIn = objpTable.innerHTML;
- strTrOut = objpTr.outerHTML;
- strTrIn = objpTr.innerHTML;
- strTrOutModify = "";
- strTrInModify = "";
- strTableOutModify = "";
- strTableInModify = "";
- }
- else
- {
- objpTable = document.getElementById('pTable');
- objpTr = document.getElementById('pTr');
- strTableIn = objpTable.innerHTML;
- strTrIn = objpTr.innerHTML;
- strTrInModify = "";
- strTableInModify = "";
- }
- strBaseHref = window.location.pathname;
- strHash = window.location.hash;
- if (strHash=="")
- {
- strHash = window.location.search;
- }
-
- if (strHash=="")
- {
- strHash = "page1";
- }
- var strPage;
- var myregexp = /page(\d+)/;
- var match = myregexp.exec(strHash);
- if (match != null && match.length > 1) {
- strPage = match[1];
- } else {
- strPage = "";
- }
- var strPicNum;
- var myregexp = /pic(\d+)/;
- var match = myregexp.exec(strHash);
- if (match != null && match.length > 1) {
- strPicNum = match[1];
- } else {
- strPicNum = "";
- }
- if (strPage=="")
- {
- if (strPicNum>1 && strPicNum<ImgTotal)
- {
- strPrev = "<a href='"+strBaseHref+"?pic"+(strPicNum*1-1)+"' target='_self'>上一张</a>";
- strNext = "<a href='"+strBaseHref+"?pic"+(strPicNum*1+1)+"' target='_self'>下一张</a>";
- }
- else if (strPicNum==1)
- {
- strPrev = "上一张";
- strNext = "<a href='"+strBaseHref+"?pic"+(strPicNum*1+1)+"' target='_self'>下一张</a>";
- }
- else if (strPicNum==ImgTotal)
- {
- strPrev = "<a href='"+strBaseHref+"?pic"+(strPicNum*1-1)+"' target='_self'>上一张</a>";
- strNext = "下一张";
- }
- else
- {
- strPicNum = Math.round(Math.random() * ImgTotal);
- if (strPicNum<=2)
- {
- strPicNum = 2;
- }
- else if(strPicNum>=ImgTotal-1)
- {
- strPicNum = ImgTotal-1;
- }
- strPrev = "<a href='"+strBaseHref+"?pic"+(strPicNum*1-1)+"' target='_self'>上一张</a>";
- strNext = "<a href='"+strBaseHref+"?pic"+(strPicNum*1+1)+"' target='_self'>下一张</a>";
- }
- strTrInModify = strTrIn.replace(/\{IMAGE\}/g, "<img border='0' src='"+ImgBaseHref+strPicNum+imgPicture+"'>");
- strTrInModify = strTrInModify.replace(/width=["']?150["']?/ig, "width=10%");
- strPage = '<tr><td colspan="'+LineNum+'" rowspan="1" width=100% align=center>'+strPrev+' '+strNext+'</tr>';
- if (navigator.userAgent.indexOf("MSIE") != -1)
- {
- strTableInModify = strTableIn.replace(strTrIn,strTrInModify);
- strTableInModify = strPage + strTableInModify + strPage;
- strTableOutModify = strTableOut.replace(strTableIn , strTableInModify);
- }
- else
- {
- strTableInModify = strTableIn.replace(strTrIn,strTrInModify);
- strTableInModify = strPage + strTableInModify + strPage;
- }
- }
- else
- {
- var intStart;
- var intEnd;
- var intPageTotal;
- intPageTotal = Math.round(ImgTotal / (PageNum * LineNum)+0.4);
- if (strPage>intPageTotal)
- {
- strPage = intPageTotal;
- }
- if (strPage<1)
- {
- strPage = 1;
- }
- intStart = (strPage-1) * PageNum * LineNum;
- intEnd = (strPage-0) * PageNum * LineNum;
- if (intEnd > ImgTotal)
- {
- intEnd = ImgTotal;
- }
- var pageImgTotal = intEnd - intStart;
- ColNum = Math.round(pageImgTotal/LineNum+0.4) ;
- for(j=0;j<ColNum;j++)
- {
- strTrInModify = "";
- for (i=0;i<LineNum ;i++ )
- {
- if (j*LineNum+i+1+intStart>ImgTotal)
- {
- strTrInModify = strTrInModify + strTrIn.replace(/\{IMAGE\}/g, " ");
- }
- else
- {
- strTrInModify = strTrInModify + strTrIn.replace(/\{IMAGE\}/g, "<a href='"+strBaseHref+"#pic"+(j*LineNum+i+1+intStart)+"' target='_blank'><img border='0' src='"+ImgBaseHref+(j*LineNum+i+1+intStart)+imgThumb+"'></a>");
- }
- }
- if (navigator.userAgent.indexOf("MSIE") != -1)
- {
- strTrOutModify = strTrOutModify + strTrOut.replace(strTrIn,strTrInModify);
- }
- else
- {
- strTableInModify = strTableInModify + strTableIn.replace(strTrIn,strTrInModify);
- }
- }
- if (strPage>1 && strPage<intPageTotal)
- {
- strPrev = "<a href='"+strBaseHref+"?page"+(strPage*1-1)+"' target='_self'>上一页</a>";
- strNext = "<a href='"+strBaseHref+"?page"+(strPage*1+1)+"' target='_self'>下一页</a> ";
- }
- else if (strPage==1)
- {
- strPrev = "上一页";
- strNext = "<a href='"+strBaseHref+"?page"+(strPage*1+1)+"' target='_self'>下一页</a>";
- }
- else if (strPage==intPageTotal)
- {
- strPrev = "<a href='"+strBaseHref+"?page"+(strPage*1-1)+"' target='_self'>上一页</a>";
- strNext = "下一页";
- }
-
- strPageStart = "<a href='"+strBaseHref+"?page1' target='_self'>首页</a>";
- strPageEnd = "<a href='"+strBaseHref+"?page"+intPageTotal+"' target='_self'>尾页</a>";
- strPageIndex ="";
- for (i=1;i<=intPageTotal;i++)
- {
- if (strPage == i)
- {
- strPageIndex = strPageIndex + "[<a href='"+strBaseHref+"?page"+i+"' target='_self'><b style='color:red'>"+i+"</b></a>]";
- }
- else
- {
- strPageIndex = strPageIndex + "[<a href='"+strBaseHref+"?page"+i+"' target='_self'>"+i+"</a>]";
- }
-
- }
- strPage = '<tr><td colspan="'+LineNum+'" rowspan="1" width=100% align=center>'+strPageStart+' '+strPrev+' '+' '+strPageIndex + ' ' + strNext+' '+strPageEnd+'</tr>';
- if (navigator.userAgent.indexOf("MSIE") != -1)
- {
- strTrOutModify = strPage + strTrOutModify + strPage;
- strTableOutModify = strTableOut.replace(strTableIn , strTrOutModify);
- }
- else
- {
- strTableInModify = strPage + strTableInModify + strPage;
- strTableInModify = strTableInModify;
- }
- }
- if (navigator.userAgent.indexOf("MSIE") != -1)
- {
- strTableOutModify = strTableOutModify.replace(/vAlign=center/ig, "align=center");
- strTableOutModify = strTableOutModify.replace(/align=middle/ig, "valign=middle");
- objpTable.outerHTML = strTableOutModify;
- }
- else
- {
- strTableInModify = strTableInModify.replace(/vAlign=center/ig, "align=center");
- strTableInModify = strTableInModify.replace(/align=middle/ig, "valign=middle");
- objpTable.innerHTML = strTableInModify;
- }
- }
- </script>
- </body></html>
[ 本帖最后由 HonestQiao 于 2005-12-9 11:01 编辑 ] |
|
免费注册
发表于 2005-10-18 19:28
发表于 2005-10-18 19:36
