JS做的批量图片展示程序 - WEB - - 技术白皮书 - 51CTO技术论坛

社区导航: 专家门诊网络技术操作系统数据库程序设计系统应用考试认证 CIO及信息化站长交流综合交流下载基地 51CTO产品服务

【设为首页 | 收藏本站】

51CTO技术论坛» 技术白皮书 » WEB » JS做的批量图片展示程序 [ 打印] [ 订阅] [ 收藏] [ 推荐给朋友] [ 本帖文本页]

论坛跳转:

wantin6

高级工程师

帖子 1209
精华 7
无忧币 16024
积分 13314
阅读权限 70

注册日期 2005-9-23

最后登录 2008-6-1

离线

[查看资料] [发短消息] [Blog]

发表于:2006-7-26 13:31　　标题：JS做的批量图片展示程序
＜上一帖 | 下一帖＞

][非PHP] JS做的批量图片展示程序

这几天给别人做了一个小的JavaScript的程序，来做批量图片的展示，完全支持FireFox和IE。

觉得查强人意，小show一下子。欢迎大家给出意见。因为刚做完，还没有做代码优化。

把以下代码，保存为test.htm，直接打开即可看到效果。

图片的分页和图片的编号的得到，使用正则表达式处理的。

// 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上一张";
         strNext = "下一张";
      }
      else if (strPicNum==1)
      {
         strPrev = "上一张";
         strNext = "下一张";
      }
      else if (strPicNum==ImgTotal)
      {
         strPrev = "上一张";
         strNext = "下一张";
      }
      else
      {
         strPicNum = Math.round(Math.random() * ImgTotal);
         if (strPicNum=ImgTotal-1)
         {
            strPicNum = ImgTotal-1;
         }
         strPrev = "上一张";
         strNext = "下一张";
      }

      strTrInModify = strTrIn.replace(/\{IMAGE\}/g, "");
      strTrInModify = strTrInModify.replace(/width=["']?150["']?/ig, "width=10%");

      strPage = ''+strPrev+' '+strNext+'';

      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 ImgTotal)
      {
         intEnd = ImgTotal;
      }
      var pageImgTotal = intEnd - intStart;

      ColNum = Math.round(pageImgTotal/LineNum+0.4) ;

      for(j=0;jImgTotal)
            {
               strTrInModify = strTrInModify + strTrIn.replace(/\{IMAGE\}/g, " ");
            }
            else
            {
               strTrInModify = strTrInModify + strTrIn.replace(/\{IMAGE\}/g, "");
            }
         }
         if (navigator.userAgent.indexOf("MSIE") != -1)
         {
            strTrOutModify = strTrOutModify + strTrOut.replace(strTrIn,strTrInModify);
         }
         else
         {
            strTableInModify = strTableInModify + strTableIn.replace(strTrIn,strTrInModify);
         }
      }

      if (strPage>1 && strPage上一页";
         strNext = "下一页 ";
      }
      else if (strPage==1)
      {
         strPrev = "上一页";
         strNext = "下一页";
      }
      else if (strPage==intPageTotal)
      {
         strPrev = "上一页";
         strNext = "下一页";
      }

      strPageStart = "首页";
      strPageEnd = "尾页";
      strPageIndex ="";
      for (i=1;i"+i+"]";
         }
         else
         {
            strPageIndex = strPageIndex + "["+i+"]";
         }

      }
      strPage = ''+strPageStart+' '+strPrev+' '+' '+strPageIndex + ' ' + strNext+' '+strPageEnd+'';

      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;
   }

  }

[ 本帖最后由 wantin6 于 2006-7-26 13:33 编辑 ]

2006-7-26 13:31

1楼

[ 顶部 ]

wangxianluhappy 性别:男

新新人类