如何在自定义标签中运用js取出图片地址

看了文章http://tech.powereasy.net/Develop/SiteWeaver/Label/2353.html有启发，想把商品内容页中的上传的多个商品图取出缩略图来，但是怎么改都不成功。
该方法的标签内容如下
　　标签内容:
{Loop} {Infobegin} 
<script language="JavaScript"> 
var str="{$Field(0,Text,0,0,0)}"
var str1=str.split("$$$")
var str2;
for(i=0;i<str1.length;i++){
str2 = str1[i].split("|")
var count=i+1
document.write ("下载地址"+count+":<a href='"+str2[1]+"'>"+str2[1]+"</a><br>");
}</script> {Infoend} {/Loop}我根据实际情况修改如下
查询语句select top 1 ProductID,ChannelID,UploadFiles from PE_Product where ProductID ={input(0)}
循环部分
{Loop} {Infobegin} <script language="JavaScript"> var str="{$Field(2,Text,0,0,0)}"   //{$Field(2,Text,0,0,0)}为数据库中的上传图片保存地址,                                       // 以"201011/2010112214311313.jpg|201011/2010112214311313_S.jpg|201011/2010112214371981.jpg|201011/2010112214371981_S.jpg|201011/2010112214372049.jpg|201011/2010112214372049_S.jpg|201011/2010112214372028.jpg|201011/2010112214372028_S.jpg|201011/2010112214372097.jpg|201011/2010112214372097_S.jpg|201011/2010112214372017.jpg|201011/2010112214372017_S.jpg|201011/2010112214372126.jpg|201011/2010112214372126_S.jpg|201011/2010112214372170.jpg|201011/2010112214372170_S.jpg|201011/2010112214372103.jpg|201011/2010112214372103_S.jpg|201011/2010112214372228.jpg|201011/2010112214372228_S.jpg|201011/2010112214372282.jpg|201011/2010112214372282_S.jpg"为例var str1=str.split("|")               //对下载地址进行第一次分割,按照|拆开,然后存放在数组str1中                                                      //str1[0]=201011/2010112214311313.jpg                                                      //str1[1]=201011/2010112214311313_S.jpgvar str2;                                        //定义一个新的数组,因为还需要第二次分割才能得出正确的地址.for(i=0;i<str1.length;i++){            //这个循环是算出有多少个下载地址的,str1.length是数组的长度.str2 = str1[i].split(".jpg")                   //第二次分割,也就是把str1[0]=201011/2010112214311313.jpg                                                     //再进行一次分隔,我们要取的是200710/20071022165122306这个值var count=i+1                                //i是0开始的.所以这里加一,用来对下载地址进行编号.//第二次分隔后,str2[0]=201011/2010112214311313.jpg,str2[1]=jpg,str2[0]即我们要取的内容document.write ("下载地址"+count+":<a href='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+".jpg' border='0'><img src='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+"_S.jpg'></a><br>");   }</script> {Infoend} {/Loop}现在有个问题，就是因为存储的图片地址其实有规律的，就是缩略图其实就是在大图后边加了一个_S，所以取出来的值其实是重复了的，而在循环用write的过程中，必然会出现有图的地址显示错误的情况，现在我就想知道如何解决这个问题，等于只去数组2的1、3、5这样的奇数记录，因为这里的偶数条记录其实和它前边的值是一样的。

解决方案 »

  1.   

    for(i=0;i<str1.length;i+=2){
      

  2.   

    问题解决了，但是有两个小问题，一个是图片的链接问题，我加了border='0'，不让它出现蓝色的链接，但是不起作用，另一个就是套用一个图片无缝滚动代码无效。
      

  3.   

    蓝色连接可以写成<a href="#" onclick="执行缩略图的方法">这种形式
      

  4.   

    我使用无缝滚动代码，如下，能正常显示效果：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Marquee 替代 -- 无间滚动</title>
    <style type="text/css">
    <!--
    * {padding: 0; margin: 0}
    body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
    input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
    textarea {padding: 5px; line-height: 20px}
    p {margin: 1em 0}
    ul {}
    li {height: 1%; overflow: hidden; list-style-type: none}
    a {color: #666666; text-decoration: none}
    a:hover {color: #333333}
    .r {float: right}
    .l {float: left}
    .b {font-weight: bold}
    .gray {color: #666666; margin-top: 8px}
    .light {color:#FF6600; margin: 0 5px}
    .case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
    .title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
    .call {display:block;}
    .key {display: block; width: 8em; float: left}
    .type {display: block; width: 6em; float: left}
    .info {padding-left: 2em}
    .demo {margin-bottom: 2em}
    -->
    </style>
    <style type="text/css">
    <!--
    #MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto}
     #MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
    #MyMarqueeY {width: 205px; height: 420px; overflow: hidden;}
     #MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
    -->
    </style>
    <script language="javascript" type="text/javascript">
    //<!--
    // 附带函数
    var
    // 用ID获取元素
    $ = function(element) {
     return typeof(element) == 'object' ? element : document.getElementById(element);
    },
    // 生成随机数
    RandStr = function(n, u){
     var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
     var Len = tmStr.length;
     var Str = "";
     for(i=1;i<n+1;i++){
      Str += tmStr.charAt(Math.random()*Len);
     }
     return (u ? Str.toUpperCase() : Str);
    };
    //-->
    </script>
    <script language="javascript" type="text/javascript">
    //<!--
    /*******************************************
     - Marquee 替代 -- 无间滚动
     - By Mudoo 2008.8
     - http://hi.baidu.com/mt20
    ********************************************
     new Marquee({
      obj   : 'myMarquee',  // 滚动对象（必须）
      name  : 'MyMQ_1',   // 实例名（可选，不指定则随机）
      mode  : 'x',    // 滚动模式（可选，x=水平, y=垂直，默认x）
      speed  : 10,    // 滚动速度（可选，越小速度越快，默认10）
      autoStart  : true,    // 自动开始（可选，默认True）
      movePause : true    // 鼠标经过是否暂停（可选，默认True）
     });
    ********************************************/
    var MyMarquees = new Array();
    // 获取检测实例名
    function getMyMQName(mName) {
     var name = mName==undefined ? RandStr(2) : mName;
     var myNames = ','+ MyMarquees.join(',') +',';
     
     while(myNames.indexOf(','+ name +',')!=-1) {
      name = RandStr(2);
     }
     return name;
    }
    function Marquee(inits) {
     var _o = this;
     var _i = inits;
     
     if(_i.obj==undefined) return;
     _o.mode    = _i.mode==undefined ? 'x' : _i.mode;   // 滚动模式(x:横向, y:纵向)
     _o.mName = getMyMQName(_i.name);       // 实例名
     _o.mObj  = $(_i.obj);         // 滚动对象
     _o.speed = _i.speed==undefined ? 10 : _i.speed;   // 滚动速度
     _o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始
     _o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停
     
     _o.mDo  = null;           // 计时器
     _o.pause = false;          // 暂停状态
     
     // 无间滚动初始化
     _o.init = function() {
      if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') && (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;
      
      MyMarquees.push(_o.mName);
      
      // 克隆滚动内容
      _o.mObj.innerHTML = _o.mode=='x' ? (
       '<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
       ' <tr>'+
       '  <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+
       '  <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+
       ' </tr>'+
       '</table>'
      ) : (
       '<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+
       '<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'
      );
      
      // 获取对象、高宽
      _o.mObj1 = $('MYMQ_'+ _o.mName +'_1');
      _o.mObj2 = $('MYMQ_'+ _o.mName +'_2');
      _o.mo1Width = _o.mObj1.scrollWidth;
      _o.mo1Height = _o.mObj1.scrollHeight;
      
      // 初始滚动
      if(_o.autoStart) _o.start();
     };
      
     // 开始滚动
     _o.start = function() {
      _o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed);
      if(_o.movePause) {
       _o.mObj.onmouseover = function() {_o.pause = true;} 
       _o.mObj.onmouseout = function() {_o.pause = false;}
      }
     }
     
     // 停止滚动
     _o.stop = function() {
      clearInterval(_o.mDo)
      _o.mObj.onmouseover = function() {} 
      _o.mObj.onmouseout = function() {}
     }
     
     // 水平滚动
     _o.moveX = function() {
      if(_o.pause) return;
      var left = _o.mObj.scrollLeft;
      if(left==_o.mo1Width){ 
       _o.mObj.scrollLeft = 0 ;
      }else if(left>_o.mo1Width) {
       _o.mObj.scrollLeft = left-_o.mo1Width;
      }else{ 
       _o.mObj.scrollLeft++;
      }
     };
     
     // 垂直滚动
     _o.moveY = function() {
      if(_o.pause) return;
      var top = _o.mObj.scrollTop;
      if(top==_o.mo1Height){ 
       _o.mObj.scrollTop = 0 ;
      }else if(top>_o.mo1Height) {
       _o.mObj.scrollTop = top-_o.mo1Height;
      }else{ 
       _o.mObj.scrollTop++;
      }
     };
     
     _o.init();
    }
    //-->
    </script>
    </head>
    <body>
    <div class="case">
     <div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>
     <div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause});</div>
     <ul class="info gray">
      <li><span class="key">obj：</span><span class="type">Object</span>滚动对象  (*必须)</li>
      <li><span class="key">name：</span><span class="type">String</span>实例名  (*可选，默认随机)</li>
      <li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直)  (*可选,默认为x)</li>
      <li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快  (*可选，默认10)</li>
      <li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始  (*可选，默认True)</li>
      <li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停  (*可选，默认True)</li>
     </ul>
    </div>
    <div class="case">
     <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>
     <div id="MyMarqueeX">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
        <td><img src="/images/111.jpg" alt="魅力泉州" /></td>
        <td><img src="/images/222.jpg" alt="魅力泉州" /></td>
        <td><img src="/images/111.jpg" alt="魅力泉州" /></td>
        <td><img src="/images/222.jpg" alt="魅力泉州" /></td>
        <td><img src="/images/111.jpg" alt="魅力泉州" /></td>
        <td><img src="/images/222.jpg" alt="魅力泉州" /></td>
       </tr>
      </table>
     </div>
    </div>
    <div class="case">
     <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div>
     <div id="MyMarqueeY">
      <img src="/images/111.jpg" alt="魅力泉州" /><br />
      <img src="/uploadfile/200812/2/F1202116566.jpg" alt="魅力泉州" /><br />
      <img src="/uploadfile/200812/2/B9202116170.jpg" alt="魅力泉州" /><br />
      <img src="/uploadfile/200812/2/85202116414.jpg" alt="魅力泉州" /><br />
      <img src="/uploadfile/200812/2/47202117594.jpg" alt="魅力泉州" /><br />
      <img src="/uploadfile/200812/2/E8202117744.jpg" alt="魅力泉州" /><br />
     </div>
    </div>
    <script language="javascript" type="text/javascript">
    //<!--
    /*********************************************
      - Marquee 演示
    *********************************************/
    new Marquee({
     obj : 'MyMarqueeX',
     movePause : true
    });
    new Marquee({
     obj : 'MyMarqueeY',
     mode : 'y'
    });
    //-->
    </script>
    </body>
    </html>
      

  5.   

    配合刚才的代码，关键代码如下：
    <div class="case">
     <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>
     <div id="MyMarqueeX">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
    {Loop} {Infobegin} 
    <script language="JavaScript"> 
    var str="{$Field(2,Text,0,0,0)}"  
    var str1=str.split("|")  
    var str2;     
    for(i=0;i<str1.length;i+=2){  
    str2 = str1[i].split(".jpg") 
    var count=i+1 
    document.write ("<td><a href='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+".jpg'+ border='0'+><img src='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+"_S.jpg'></a></td>");  
    }
    </script>
     {Infoend} {/Loop}
       </tr>
      </table>
     </div>
    </div>
    这样的话图片也不显示，更不用说滚动了，详细地址可见http://www.managewhy.com/Shop/4.html
      

  6.   

    无缝滚动用到的样式这些我已经单独写到一个CSS文件中去了，现在问题好像不在样式表，会不会是JS冲突了
      

  7.   

    border='0'加错位置了。document.write ("下载地址"+count+":<a href='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+".jpg' border='0'><img src='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+"_S.jpg'></a><br>");   　　改成：
    document.write ("下载地址"+count+":<a href='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+".jpg'><img src='/{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/"+str2[0]+"_S.jpg' border='0'></a><br>");