JavaScript图片效果

  安全提示：腾讯公司提醒您警惕“QQ中奖”骗局。

大佑 20:10:16
<p><style type="text/css">

body{
  padding: 0px;
  margin: 0px;
  font: 70% verdana, geneva, arial, helvetica, sans-serif;
  color: #000;
  text-align: center
  }
#outer{
  padding: 0px;
  margin: 0px;
  width: 400px;
  text-align: center
  }
#focus{
  border: #ccc 2px solid;
  margin: 0px;
  padding: 0px;
  padding-top: 15px;
  background: url(/images/tile.gif) #fff repeat-y left top;
  width:540px;
  position: relative;
  height: 120px
  }
#description{
  height:120px;
 /*overflow:hidden;*/
 overflow:hidden;
  margin-right:0px;
 float:left;
 
  }
.dis{
 float:left;
 width:40px;
 text-align: center;
 padding-top:30px
}
#description ul, #description li {
 float:left;
display: inline;
margin: 0;
padding: 0;
height:150px
}
.content a:active,
.content a:visited,
.content a:link {
display: inline;
text-decoration: none;
}
.content a:hover {
 color: #ffffff;
 display: inline;
 text-decoration: none;
}
img {border:0px}</style></p>
<div id="outer">
<div id="focus">
<div class="dis"><img id="img_l" alt="向左滚动" src="http://www.showwho.com/images/test/hupogundong/home4_r8_c2.gif" onclick="doSlide(-1)" /></div>
<div class="description" id="description">
<div id="content0" style="background:red;">
<ul class="content" id="content">
    <li><a href="#"><img src="http://www.showwho.com/images/test/hupogundong/199417.jpg" alt="" /></a>< >
    <li><a href="#"><img src="http://www.showwho.com/images/test/hupogundong/199417.jpg" alt="" /></a>< >
    <li><a href="#"><img src="http://www.showwho.com/images/test/hupogundong/199417.jpg" alt="" /></a>< >
    <li><a href="#"><img src="http://www.showwho.com/images/test/hupogundong/199417.jpg" alt="" /></a>< >
    <li><a href="#"><img src="http://www.showwho.com/images/test/hupogundong/199417.jpg" alt="" /></a>< >
    <li><a href="#"><img src="http://www.showwho.com/images/test/hupogundong/199417.jpg" alt="" /></a>< >
</ul>
</div>
</div>
<div class="dis"><img id="img_r" alt="向右滚动" src="http://www.showwho.com/images/test/hupogundong/home4_r9_c12.gif" onclick="doSlide(1)" /></div>
</div>
</div>
<script>
var img_pad=5//图片间隔
var img_w=141//图片宽
var img_n=3//每窗图片数
document.write ("<style>.content a {padding: 0 "+ img_pad+" 0 "+ img_pad+";}</style>")
var win_w=img_w*img_n+(img_pad*3)*(img_n-1)
document.getElementById("description").style.width=win_w
var ok_add=document.getElementById("content0").getElementsByTagName("LI").length
document.getElementById("content0").innerHTML+=document.getElementById("content0").innerHTML
var ok_obj=document.getElementById("content0").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1;
document.getElementById("content0").style.width=(ok+1)*win_w
  var ele=document.getElementById("description");
  var w=ele.clientWidth;
  var n=20,t=50;
  var timers=new Array(n);
  var k=0;doSlide(0);
var ss=1,t2,t0
var add_1= (ok_add%2==0)?0:1
var add_2= (ok_add%2==0)?1:0
function doSlide(s){
ss=s;
  if (k>=ok-add_1 &&s>0){ele.scrollLeft=w;k=1;}
  if (k<=1-add_2 &&s<0){ele.scrollLeft=(ok-1)*w;k=ok-1}
  k+=s;
    var x=ele.scrollLeft
    var d=k*w-x;
    for(var i=0;i<n;i++){(
     function(){
      if(timers[i]) clearTimeout(timers[i]);
      var j=i;
      timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
     }
    )()};
}
</script>