javascript写的类似翻页效果 函数看不懂 帮忙分析下

<html>
<head>
<title>类似翻页效果展示</title>
<style>
#focus{
border: #ccc 2px solid;
width: 530px;
position:relative;
height: 170px;
}
#beni{
left: 0px;
margin: 0px;
width: 100px;
list-style-type: none;
position: absolute;
top: 2px;
}
#beni li{
  border-top: #fff 1px solid;
  font-size: 12px;
  float: left;
  width: 100px;
  text-indent: 24px;
  line-height: 26px
  }
#beni li.first{
  border-top: 0px
  }
#beni li a{
  display: block;
  font-weight: bold;
  background: #eee;
  margin: 0px;
  text-decoration: none
  }
#beni li a:hover{
  background: #f9f9f9;
  }
#description{
width:420px;
overflow:hidden;
float:right;
margin-right:3px;

padding-top: 5px;
  }
#kun{
float:left;
margin-top:10px;
height:200px;
}
</STYLE>
<script>
//窗体加载时就执行的函数定义
window.onload=function(){
  var ele=document.getElementById("description");  
  var w=ele.clientWidth;     
  var n=20,t=20;
  var timers=new Array(n);
  var c=document.getElementById("beni").getElementsByTagName("li");
  for(var i=0;i<c.length;i++){                                      
    c[i].index=i;                                              
c[i].onmouseover=doSlide;
  }
  c=null;
  //如果是要显示第一张不执行循环，否则执行循环
 function doSlide() {
    var x=ele.scrollLeft;              
    var d=this.index*w-x;                
    if(!d) return;
//循环执行20次一个函数
    for(var i=0;i<n;i++)
(function()                         {
      if(timers[i])
        clearTimeout(timers[i]);
      var j=i;
  //每隔(i+1)*t个ms后执行一个函数
      timers[i]=setTimeout(function(){
        ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));//这个地方不明白 为什么这么做？
      },(i+1)*t);
    })();
  }
}
</script>
</head>
<body>
<div id=focus>
  <ul id=beni>
    <li class=first><a href="#">博客频道</a></li>
    <li><a href="#">资讯频道</a></li>
    <li><a href="#">新闻频道</a></li>
    <li><a href="#">产品频道</a></li>
    <li><a href="#">悼念频道</a></li>
    <li><a href="#">互动频道</a></li>
  </ul>
  <div id=description>
    <!--一张长2520像素、高156像素的图片，该图片由6个不同画面组成，平均分割该图片-->
    <img src="images/6.jpg" /> </div></div>
</div>
</body>
</html>

解决方案 »

  1.   


    这怎么有翻页效果呢？
    通过设置图片外的DIV层的scrollLeft去滚动图片而已！其他都是CSS样式设置了
    核心就是这句，其他都是一些CSS和取ID对象的东西
    ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));//这个地方不明白 为什么这么做？
      

  2.   

    嗯 就是滚动图片的！我就是要这个效果就可以了 但是 那个不明白那个函数ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));的意思