那位大虾帮忙看看这段代码如何给图片加链接急啊啊啊!!1!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现伪3D轮播图片幻灯片切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
html {background:#000}
body, ul {margin:0;padding:0}
li {list-style:none}
img {border:none;display:block}
.slide-wp {
width: 500px;
height: 300px;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
}
.nav-wp {
position: absolute;
background: #ccc;
top: 50%;
margin-top: 170px;
left: 50%;
margin-left: -100px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 0 20px 6px 10px;
_padding: 0 20px 2px 10px;
}
.nav li {
float: left;
margin-left: 10px;
font-size: 20px;
font-weight: bold;
font-family: tahoma;
color: #22739e;
cursor: pointer;
height: 22px;
}
.nav li.cur{color: #ff7a00}
.next {
position:absolute;
top: 0;
left: 160px;
padding: 4px 8px;
color: #ff7a00;
background: #ccc;
height: 20px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈</h2>
<div id="slider" class="slide-wp">
<ul>
<li><a href="/" target="_blank"><img src="http://www.CsrCode.cn/images/m01.jpg"  alt="" /></a></li>
<li><a href="/" target="_blank"><img src="http://www.CsrCode.cn/images/m02.jpg"  alt="" /></a></li>
<li><a href="/" target="_blank"><img src="http://www.CsrCode.cn/images/m03.jpg"  alt="" /></a></li>
<li><a href="/" target="_blank"><img src="http://www.CsrCode.cn/images/m04.jpg"  alt="" /></a></li>
<li><a href="/" target="_blank"><img src="http://www.CsrCode.cn/images/m05.jpg"  alt="" /></a></li>
</ul>
</div>
<div class="nav-wp">
<ul id="nav" class="nav">
<li onclick="mySlider.pos(0)">●</li>
<li onclick="mySlider.pos(1)">●</li>
<li onclick="mySlider.pos(2)">●</li>
<li onclick="mySlider.pos(3)">●</li>
<li onclick="mySlider.pos(4)">●</li>
</ul>
<a class="next" onclick="mySlider.move()">next</a>
</div>
<script type="text/javascript">
var HR = {
 $ : function(i) {return document.getElementById(i)},
 $$ : function(c, p) {return p.getElementsByTagName(c)},
 ce : function(i, t) {
  var o = document.createElement(i);
  t.appendChild(o);
  return o;
 }
};
HR.slider3D = function () {
 var init = function (o) {
  this.o = o;
  var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
  this.l = li.length;
  this.w = wp.offsetWidth;
  this.h = wp.offsetHeight;
  this.at = o.auto? o.auto : 4;
  var con = this.con = HR.ce('div', wp);
  con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';
  ul.style['display'] = 'none';  
  this.a1 = HR.ce('a', con);  
  this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';  
  this.a2 = HR.ce('a', con);
  this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
  this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
  this.img = HR.$$('img', ul);
  this.s = o.maskSize ? o.maskSize : 5;
  
  this.mask11 = HR.ce('span', this.a1);
  this.mask12 = HR.ce('span', this.a1);
  this.mask21 = HR.ce('span', this.a2);
  this.mask22 = HR.ce('span', this.a2);
  
  this.pos(0);
 }
 init.prototype = {
  pos : function (i) {
   clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;
   var navli = HR.$$('li', HR.$(this.o.navId));
   for (var j=0; j<navli.length; j++) {
    navli[j].className = i == j ? 'cur' : '';
   }
   var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
   img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
   img1.width = this.w;
   img2.src = this.img[i].src;
   img2.width = 0;
   img1.height = img2.height = this.h;
   this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px';
   this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
   this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
   this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
   this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
  },
  anim : function (i) {
   var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;
   if (w2 == this.w) {
    clearInterval(this.li[i].a);
    HR.$$('img', this.a1)[0].width = 0;
    HR.$$('img', this.a2)[0].width = this.w;
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
   }else {
    HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
    HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
    if (!this.au) this.auto();
   }
  },
  auto : function () {
   var _this = this;
   this.au = setInterval(function(){_this.move()}, this.at*1000);
  },
  move : function () {
   var n = this.cur==this.l-1 ? 0 : this.cur+1;
   this.pos(n);
  }
 }
 return init;
}();
var mySlider = new HR.slider3D({
 id: 'slider',
 maskSize: 6,
 navId: 'nav',
 auto: 4
})</script>
</body>
</html><p align="center"><font color=skyblue>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

解决方案 »

  1.   

    楼主的信誉真是罕见的高啊，这个问题要注意啊，做事先做那个啥来着。呵呵！
    楼主导入jquery包，下面就跟图片加好超链接了。<script>
        $(function () {
            $("img").parent().attr("href", "http://www.baidu.com");
        });
    </script>
      

  2.   

    改好了！！<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS实现伪3D轮播图片幻灯片切换效果丨芯晴网页特效丨CsrCode.Cn</title>
    <style>
    html {background:#000}
    body, ul {margin:0;padding:0}
    li {list-style:none}
    img {border:none;display:block}
    .slide-wp {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -150px;
    }
    .nav-wp {
    position: absolute;
    background: #ccc;
    top: 50%;
    margin-top: 170px;
    left: 50%;
    margin-left: -100px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 0 20px 6px 10px;
    _padding: 0 20px 2px 10px;
    }
    .nav li {
    float: left;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
    font-family: tahoma;
    color: #22739e;
    cursor: pointer;
    height: 22px;
    }
    .nav li.cur{color: #ff7a00}
    .next {
    position:absolute;
    top: 0;
    left: 160px;
    padding: 4px 8px;
    color: #ff7a00;
    background: #ccc;
    height: 20px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈</h2>
    <div id="slider" class="slide-wp">
    <ul>
    <li><a href="#a" target="_blank"><img src="http://www.CsrCode.cn/images/m01.jpg" alt="" /></a></li>
    <li><a href="#b" target="_blank"><img src="http://www.CsrCode.cn/images/m02.jpg" alt="" /></a></li>
    <li><a href="#c" target="_blank"><img src="http://www.CsrCode.cn/images/m03.jpg" alt="" /></a></li>
    <li><a href="#d" target="_blank"><img src="http://www.CsrCode.cn/images/m04.jpg" alt="" /></a></li>
    <li><a href="#e" target="_blank"><img src="http://www.CsrCode.cn/images/m05.jpg" alt="" /></a></li>
    </ul>
    </div>
    <div class="nav-wp">
    <ul id="nav" class="nav">
    <li onclick="mySlider.pos(0)">●</li>
    <li onclick="mySlider.pos(1)">●</li>
    <li onclick="mySlider.pos(2)">●</li>
    <li onclick="mySlider.pos(3)">●</li>
    <li onclick="mySlider.pos(4)">●</li>
    </ul>
    <a class="next" onclick="mySlider.move()">next</a>
    </div>
    <script type="text/javascript">
    var HR = {
     $ : function(i) {return document.getElementById(i)},
     $$ : function(c, p) {return p.getElementsByTagName(c)},
     ce : function(i, t) {
      var o = document.createElement(i);
      t.appendChild(o);
      return o;
     }
    };
    HR.slider3D = function () {
     var init = function (o) {
      this.o = o;
      var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
      this.l = li.length;
      this.w = wp.offsetWidth;
      this.h = wp.offsetHeight;
      this.at = o.auto? o.auto : 4;
      var con = this.con = HR.ce('div', wp);  
      con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';  
      con.id="showpic";
      ul.style['display'] = 'none';   
      this.a1 = HR.ce('a', con);   
      this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';   
      this.a1.href="#";
      this.a2 = HR.ce('a', con);
      this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
      this.a2.href="#";
      this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
      this.img = HR.$$('img', ul);
      this.s = o.maskSize ? o.maskSize : 5;
       
      this.mask11 = HR.ce('span', this.a1);
      this.mask12 = HR.ce('span', this.a1);
      this.mask21 = HR.ce('span', this.a2);
      this.mask22 = HR.ce('span', this.a2);
       
      this.pos(0);
     }
     init.prototype = {
      pos : function (i) {
      clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;  
      var navli = HR.$$('li', HR.$(this.o.navId));
      for (var j=0; j<navli.length; j++) {
      navli[j].className = i == j ? 'cur' : '';
      }
      var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
      img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
      img1.width = this.w;
      img2.src = this.img[i].src;
      img2.width = 0;
      img1.height = img2.height = this.h;
      
      var aount=document.getElementById('slider').getElementsByTagName('a');
     //alert(i);
     var alink=document.getElementById('showpic').getElementsByTagName('a');
      alink[0].href=aount[i].href;
      if(i==4)
       alink[1].href=aount[0].href;
      else
       alink[1].href=aount[i+1].href;
      
      this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px';
      this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
      this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
      this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
      this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
      },
      anim : function (i) {
      var w1 = HR.$$('img', this.a1)[0].width, w2 = HR.$$('img', this.a2)[0].width;
      if (w2 == this.w) {
      clearInterval(this.li[i].a);
      HR.$$('img', this.a1)[0].width = 0;
      HR.$$('img', this.a2)[0].width = this.w;
      this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
      this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
      this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
      this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
      }else {
      HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
      HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
      this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
      this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
      this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
      this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
      if (!this.au) this.auto();
      }
      },
      auto : function () {
      var _this = this;
      this.au = setInterval(function(){_this.move()}, this.at*1000);
      },
      move : function () {
      var n = this.cur==this.l-1 ? 0 : this.cur+1;
      this.pos(n);
      }
     }
     return init;
    }();
    var mySlider = new HR.slider3D({
     id: 'slider',
     maskSize: 6,
     navId: 'nav',
     auto: 4
    })</script>
    </body>
    </html>
      

  3.   

    链接位置改正<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS实现伪3D轮播图片幻灯片切换效果丨芯晴网页特效丨CsrCode.Cn</title>
    <style>
    html {background:#000}
    body, ul {margin:0;padding:0}
    li {list-style:none}
    img {border:none;display:block}
    .slide-wp {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -150px;
    }
    .nav-wp {
    position: absolute;
    background: #ccc;
    top: 50%;
    margin-top: 170px;
    left: 50%;
    margin-left: -100px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 0 20px 6px 10px;
    _padding: 0 20px 2px 10px;
    }
    .nav li {
    float: left;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
    font-family: tahoma;
    color: #22739e;
    cursor: pointer;
    height: 22px;
    }
    .nav li.cur{color: #ff7a00}
    .next {
    position:absolute;
    top: 0;
    left: 160px;
    padding: 4px 8px;
    color: #ff7a00;
    background: #ccc;
    height: 20px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈</h2>
    <div id="slider" class="slide-wp">
    <ul>
    <li><a href="#a" target="_blank"><img src="http://www.CsrCode.cn/images/m01.jpg" alt="" /></a></li>
    <li><a href="#b" target="_blank"><img src="http://www.CsrCode.cn/images/m02.jpg" alt="" /></a></li>
    <li><a href="#c" target="_blank"><img src="http://www.CsrCode.cn/images/m03.jpg" alt="" /></a></li>
    <li><a href="#d" target="_blank"><img src="http://www.CsrCode.cn/images/m04.jpg" alt="" /></a></li>
    <li><a href="#e" target="_blank"><img src="http://www.CsrCode.cn/images/m05.jpg" alt="" /></a></li>
    </ul>
    </div>
    <div class="nav-wp">
    <ul id="nav" class="nav">
    <li onclick="mySlider.pos(0)">●</li>
    <li onclick="mySlider.pos(1)">●</li>
    <li onclick="mySlider.pos(2)">●</li>
    <li onclick="mySlider.pos(3)">●</li>
    <li onclick="mySlider.pos(4)">●</li>
    </ul>
    <a class="next" onclick="mySlider.move()">next</a>
    </div>
    <script type="text/javascript">
    var HR = {
     $ : function(i) {return document.getElementById(i)},
     $$ : function(c, p) {return p.getElementsByTagName(c)},
     ce : function(i, t) {
      var o = document.createElement(i);
      t.appendChild(o);
      return o;
     }
    };
    HR.slider3D = function () {
     var init = function (o) {
      this.o = o;
      var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
      this.l = li.length;
      this.w = wp.offsetWidth;
      this.h = wp.offsetHeight;
      this.at = o.auto? o.auto : 4;
      var con = this.con = HR.ce('div', wp);  
      con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';  
      con.id="showpic";
      ul.style['display'] = 'none';   
      this.a1 = HR.ce('a', con);   
      this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';   
      this.a1.href="#";
      this.a2 = HR.ce('a', con);
      this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
      this.a2.href="#";
      this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
      this.img = HR.$$('img', ul);
      this.s = o.maskSize ? o.maskSize : 5;
       
      this.mask11 = HR.ce('span', this.a1);
      this.mask12 = HR.ce('span', this.a1);
      this.mask21 = HR.ce('span', this.a2);
      this.mask22 = HR.ce('span', this.a2);
       
      this.pos(0);
     }
     init.prototype = {
      pos : function (i) {
      clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;  
      var navli = HR.$$('li', HR.$(this.o.navId));
      for (var j=0; j<navli.length; j++) {
      navli[j].className = i == j ? 'cur' : '';
      }
      var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
      img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
      img1.width = this.w;
      img2.src = this.img[i].src;
      img2.width = 0;
      img1.height = img2.height = this.h;
      
      var aount=document.getElementById('slider').getElementsByTagName('a');
     //alert(i);
     var alink=document.getElementById('showpic').getElementsByTagName('a');
      alink[1].href=aount[i].href;
      if(i==4)
       alink[0].href=aount[0].href;
      else
       alink[0].href=aount[i+1].href;
      
      this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px';
      this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
      this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
      this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
      this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
      },
      anim : function (i) {
      var w1 = HR.$$('img', this.a1)[0].width, w2 = HR.$$('img', this.a2)[0].width;
      if (w2 == this.w) {
      clearInterval(this.li[i].a);
      HR.$$('img', this.a1)[0].width = 0;
      HR.$$('img', this.a2)[0].width = this.w;
      this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
      this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
      this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
      this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
      }else {
      HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
      HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
      this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
      this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
      this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
      this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
      if (!this.au) this.auto();
      }
      },
      auto : function () {
      var _this = this;
      this.au = setInterval(function(){_this.move()}, this.at*1000);
      },
      move : function () {
      var n = this.cur==this.l-1 ? 0 : this.cur+1;
      this.pos(n);
      }
     }
     return init;
    }();
    var mySlider = new HR.slider3D({
     id: 'slider',
     maskSize: 6,
     navId: 'nav',
     auto: 4
    })</script>
    </body>
    </html>