如何修改这个js让图片显示缩略图？？？？？求教大神

<!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>
    <style type="text/css">
    <!--
    span{overflow:hidden;font-size:0;line-height:0;}
    .shutter{position:relative;overflow:hidden;height:145px;width:145px;}
    .shutter li{position:absolute;left:0;top:0;}
    ul,li{list-style:none;margin:0;padding:0}
    img{display:block;border:none; width:145px; height:145px;}
    .shutter-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
    .shutter-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
    -->
   .shutter ul li img{height:145px;width:145px;}
    </style>
    <script type="text/javascript">
    <!--
    var Hongru={};
    function H$(id){return document.getElementById(id)}
    function H$$(c,p){return p.getElementsByTagName(c)}
    Hongru.shutter = function(){
    function init(anchor,options){this.anchor=anchor; this.init(options);}
    init.prototype = {
    init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
    var wp = H$(options.id), //获取图片列表父元素
    ul = H$$('ul',wp)[0], //获取
    li = this.li = H$$('li',ul);
    this.a = options.auto?options.auto:4; //自动运行间隔
    this.index = options.position?options.position:0; //开始运行的图片序号（从0开始）
    this.l = li.length;
    this.cur = 0; //当前显示的图片序号
    this.N = options.roller?options.roller:1;
    this.W = wp.offsetWidth;
    this.H = wp.offsetHeight;
    this.aw = options.speed?options.speed:5;
    this.mask = [];
    this.convolution = [];
    this.nav = [];
    ul.style.display = 'none';
    var container = this.container = document.createElement('div'),
    con_a = this._a = document.createElement('a');
    con_a.target = '_blank';
    container.style.cssText = con_a.style.cssText = 'position:absolute;width:'+this.W+'px;height:'+this.H+'px;left:0;top:0';
    container.appendChild(con_a);
    for (var x=0; x<4; x++) {
    var mask = document.createElement('span');
    mask.id = this.anchor + 'convolution-mask-' + (x+1);
    this.mask.push(mask);con_a.appendChild(mask);
    var cvl = document.createElement('span');
    cvl.id = this.anchor + 'convolution-' + (x+1);
    con_a.appendChild(cvl);
    }
    wp.appendChild(container);
    this.nav_wp = document.createElement('div'); //先建一个div作为控制器父标签，你也可以用<ul>或<ol>来做，语义可能会更好，这里我就不改了
    this.nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式
    for(var i=0;i<this.l;i++){
    /* == 绘制控制器 == */
    var nav = document.createElement('a'); //这里我就直接用a标签来做控制器，考虑语义的话你也可以用li
    nav.className = options.navClass?options.navClass:'shutter-nav'; //控制器class，默认为'shutter-nav'
    this.nav.push[nav];
    nav.innerHTML = i+1;
    nav.onclick = new Function(this.anchor+'.pos('+i+')'); //绑定onclick事件，直接调用之前写好的pos()函数
    this.nav_wp.appendChild(nav);
    }
    wp.appendChild(this.nav_wp);
    this.curC = options.curNavClass?options.curNavClass:'shutter-cur-nav';
    this.pos(this.index); //变换函数
    },
    auto:function(){
    this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000);
    },
    move:function(i){ //参数i有两种选择，1和-1，1代表运行到下一张，-1代表运行到上一张
    var n = this.cur+i;
    var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一张或上一张的序号（注意三元选择符的运用）
    this.pos(m); //变换到上一张或下一张
    },
    pos:function(i){
    clearInterval(this.li.a);clearInterval(this.__a);clearInterval(this.__b);clearInterval(this.__c);clearInterval(this.__d);clearInterval(this.__e);clearInterval(this.__f);clearInterval(this.__g);clearInterval(this.__h);
    //this.aw = this.dir == 'H'?this.W/this.stN : this.H/this.stN;
    var src = H$$('img',this.li[i])[0].src;
    var _n = i+1>=this.l?0:i+1;
    var src_n = H$$('img',this.li[_n])[0].src;
    this.container.style.backgroundImage = 'url('+src_n+')' 
    for(var n=0;n<4;n++){
    this.mask[n].style.cssText = 'position:absolute;background:#fff;width:'+this.W/2+'px;height:'+this.H/2+'px;left:'+(n%2 == 0 ? 0 : this.W/2)+'px;top:'+(n>1 ? this.H/2 : 0) +'px';
    }
    H$(this.anchor+'convolution-1').style.cssText = 'position:absolute;border-width:0px '+this.W/4+'px;border-style:solid solid dashed dashed;border-color:#fff #fff transparent transparent;width:0;height:0;left:0;top:'+this.H/2+'px;font-size:0;line-height:0';
    H$(this.anchor+'convolution-2').style.cssText = 'position:absolute;border-width:'+this.H/4+'px 0px;border-style:dashed solid solid dashed;border-color:transparent #fff #fff transparent;width:0;height:0;left:'+this.W/2+'px;top:0;overflow:hidden;font-size:0;line-height:0';
    H$(this.anchor+'convolution-3').style.cssText = 'font-size:0;line-height:0;position:absolute;border-width:0px '+this.W/4+'px;border-style:dashed dashed solid solid;border-color:transparent transparent #fff #fff;width:0;height:0;left:'+this.W/2+'px;top:'+this.H/2+'px';
    H$(this.anchor+'convolution-4').style.cssText = 'font-size:0;line-height:0;position:absolute;border-width:'+this.H/4+'px 0px;border-style:solid dashed dashed solid;border-color:#fff transparent transparent #fff;width:0;height:0;left:'+this.W/2+'px;top:'+this.H/2+'px';
    this.cur = i; //绑定当前显示图片的正确序号
    this.li.a = false;
    for(var x=0;x<this.l;x++){
    H$$('a',this.nav_wp)[x].className = x==i?this.curC:'shutter-nav'; //绑定当前控制器样式
    }
    this._a.href = H$$('a',this.li[i])[0].href;
    //this.auto(); //自动运行
    //this.li[i].a = setInterval(new Function(this.anchor+'.anim('+i+')'), 4*this.stN);
    this.anim();
    },
    anim: function () {
    this.__a = setInterval(new Function(this.anchor+'._1()'), 20);
    if (this.N == 2) this.__e = setInterval(new Function(this.anchor+'._5()'), 20);
    if (this.N == 4) {
    this.__c = setInterval(new Function(this.anchor+'._3()'), 20);
    this.__e = setInterval(new Function(this.anchor+'._5()'), 20);
    this.__g = setInterval(new Function(this.anchor+'._7()'), 20);
    }
    },
    _1 : function () {
    var s =  H$(this.anchor+'convolution-2'), a = H$(this.anchor+'convolution-mask-2'), d = parseInt(s.style.borderRightWidth)+this.aw;
    if(d>=this.W/4){
    clearInterval(this.__a);
    d = this.W/4;
    this.__b = setInterval(new Function(this.anchor+'._2()'), 20);
    }
    s.style.borderLeftWidth = s.style.borderRightWidth = d+'px';
    a.style.left = 2*d + this.W/2 + 'px';
    },
    _2 : function () {
    var s =  H$(this.anchor+'convolution-2'), d = parseInt(s.style.borderTopWidth)-this.aw;
    if(d<=0){
    clearInterval(this.__b);
    d = 0;
    if (this.N == 1 || this.N == 2) this.__c = setInterval(new Function(this.anchor+'._3()'), 20);
    }
    s.style.borderTopWidth = s.style.borderBottomWidth = d + 'px';
    s.style.top = this.H/2-2*d + 'px';
    },
    _3 : function () {
    var s =  H$(this.anchor+'convolution-3'), a = H$(this.anchor+'convolution-mask-4'), d = parseInt(s.style.borderTopWidth)+this.aw;
    if(d>=this.H/4){
    clearInterval(this.__c);
    d = this.H/4;
    this.__d = setInterval(new Function(this.anchor+'._4()'), 20);
    }
    s.style.borderTopWidth = s.style.borderBottomWidth = d+'px';
    a.style.top = 2*d + this.H/2 + 'px';
    },
    _4 : function () {
    var s =  H$(this.anchor+'convolution-3'), dm = parseInt(s.style.borderRightWidth)-this.aw;
    if(dm<=0){
    clearInterval(this.__d);
    dm = 0;
    if (this.N == 1) this.__e = setInterval(new Function(this.anchor+'._5()'), 20);
    }
    s.style.borderLeftWidth = s.style.borderRightWidth = dm + 'px';
    },
    _5 : function () {
    var s =  H$(this.anchor+'convolution-4'), a = H$(this.anchor+'convolution-mask-3'), d = parseInt(s.style.borderRightWidth)+this.aw;
    if(d>=this.W/4){
    clearInterval(this.__e);
    d = this.W/4;
    this.__f = setInterval(new Function(this.anchor+'._6()'), 20);
    }
    s.style.borderLeftWidth = s.style.borderRightWidth = d+'px';
    s.style.left = this.W/2-2*d + 'px';
    a.style.left = -2*d + 'px';
    },
    _6 : function () {
    var s =  H$(this.anchor+'convolution-4'), dm = parseInt(s.style.borderTopWidth)-this.aw;
    if(dm<=0){
    clearInterval(this.__f);
    dm = 0;
    if (this.N == 1 || this.N == 2) this.__g = setInterval(new Function(this.anchor+'._7()'), 20);
    }
    s.style.borderTopWidth = s.style.borderBottomWidth = dm + 'px';
    },
    _7 : function () {
    var s =  H$(this.anchor+'convolution-1'), a = H$(this.anchor+'convolution-mask-1'), d = parseInt(s.style.borderTopWidth)+this.aw;
    if(d>=this.H/4){
    clearInterval(this.__g);
    d = this.H/4;
    this.__h = setInterval(new Function(this.anchor+'._8()'), 20);
    }
    s.style.borderTopWidth = s.style.borderBottomWidth = d+'px';
    s.style.top = this.H/2-2*d + 'px';
    a.style.top = -2*d + 'px';
    },
    _8 : function () {
    var s =  H$(this.anchor+'convolution-1'), dm = parseInt(s.style.borderRightWidth)-this.aw;
    if(dm<=0){
    clearInterval(this.__h);
    dm = 0;
    if (!this.li.a) this.auto();
    }
    s.style.borderLeftWidth = s.style.borderRightWidth = dm + 'px';
    s.style.left = this.W/2-2*dm + 'px';
    }
    }
    return {init:init}
    }();
    //-->
    </script>
    </head>
JavaScript

解决方案 »

  1.   

        <body>
        <!--把下面代码加到<body>与</body>之间-->
        <div id="shutter" class="shutter" style="">
        <ul>
        <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg" width="145" height="145" /></a></li>
       <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg" width="145" height="145" ></a></li>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg" width="145" height="145" ></a></li>
      <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg" width="145" height="145" ></a></li>
       <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg" width="145" height="145" ></a></li>
        </ul>
        </div>
        <div id="shutter2" class="shutter" style="margin-top:20px">
        <ul>
       <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
         <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
      <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
        </ul>
        </div>
        <div id="shutter4" class="shutter" style="margin-top:20px">
        <ul>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
         <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
         <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
        </ul>
        </div>
        
         <div id="shutter1" class="shutter" style="margin-top:20px">
        <ul>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
         <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
         <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
          <li><a href="#" target="_blank"><img src="http://www.cngolf.tv/uploads/allimg/130705/19-130F50951120-L.jpg"></a></li>
        </ul>
        </div>
        <script type="text/javascript">
        <!--
        var roller = new Hongru.shutter.init('roller',{
        id:'shutter',
        auto:2,
        speed:20
        });
        var roller2 = new Hongru.shutter.init('roller2',{
        id:'shutter2',
        speed:15,
        roller: 2
        });
      var roller1 = new Hongru.shutter.init('roller1',{
        id:'shutter1',
        speed:15,
        roller: 2
        });
        var roller4 = new Hongru.shutter.init('roller4',{
        id:'shutter4',
        roller: 4
        });
        //-->
        </script>
        </body>
        </html>