图片轮播的奇怪现象【图片显示不完整】

悬赏园豆：20 [已解决问题] 解决于 2012-07-26 12:04

今天仿照李炎恢老师的视频做了个图片轮播。

我图片的高度和宽度都设置一样的了。

但在图片切换的过程中，当前窗口显示的图片总有着上一张或者下一张的影子。

请教前辈们看看，指出一下，谢谢。

<!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> 测试轮播 </title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="style/style.css" />
  <script type="text/javascript">
  function getByClass(className,context){
    context=context || document;
  if(context.getElementsByClassName){
      return context.getElementsByClassName(className);
  }
  var nodes=context.getElementsByClassName('*'),
      ret=[];
  for(var i=0;i<nodes.length;i++){
      if (hasClass(nodes[i],className)) ret.push(nodes[i]);
  }
  return ret;
}

function hasClass(node,className){
    var names=node.className.split(/\s+/);
    for(var i=0;i<names.length;i++){
        if(names[i]==className) return true;
    }
    return false;
}

//下面是动画函数

/*参数说明

curTime:当前时间，即动画已经进行了多长时间，开始时间为0.
start:开始值。
dur:动画持续多长时间
alter:总的变化量

*/
function animate(o,start,alter,dur,fx){
    var curTime=0;
    var t=setInterval(function(){
        if (curTime>=dur) clearTime(t);
        for(var i in start){
            o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
        }
        curTime+=50;
    },50);
}

function Linear(start,alter,curTime,dur) {
    return start+curTime/dur*alter;            
}//最简单的线性变化，也就是匀速运动

function Quad (start,alter,curTime,dur) {
    return start+Math.pow(curTime/dur,2)*alter;
}

//动画结束
  </script>
<script type="text/javascript">
window.onload=function(){
    var number=getByClass('buttons')[0];
    var btns=number.getElementsByTagName('li');
    var scrollContent=getByClass('scrollContent')[0];
    var cur=btns[0],t;
    for (var i=0;i<btns.length;i++){
        (function(i){
            btns[i].onmouseover=function(){
                clearTimeout(t);
              //scrollContent.style.top=(-i*260)+"px";
                var top=parseInt(scrollContent.style.top) || 0;
                animate(scrollContent,{top:top},{top:(-i*260)-top},400,Quad)
                for(var j=0;j<btns.length;j++){
                    btns[j].className="";
            }
                this.className="hover";
                cur=this;
          };
          btns[i].onmouseout=function(){
                      t=setTimeout(fn,2000);  
          }            //移开鼠标
          btns[i].index=i;
        })(i);
        
    }
    
    btns[0].onmouseover();//对第一个执行动作
    t=setTimeout(fn,2000); //停留2秒
     function fn(){
         var nextIndex=cur.index+1;
         if(nextIndex==btns.length){
             nextIndex=0;
         }
         btns[nextIndex].onmouseover();
      t=setTimeout(fn,2000);
    }
};
    
    </script>
 </head>

<body>
 <div id="flashBox">
    <div class="scrollFrame">
    <div class="scrollContent">
    <a href="#" target="_blank"><img src="images/flash1.jpg" alt="第1张" /></a>
    <a href="#" target="_blank"><img src="images/flash2.jpg" alt="第2张" /></a>
    <a href="#" target="_blank"><img src="images/flash3.jpg" alt="第3张" /></a>
    <a href="#" target="_blank"><img src="images/flash4.jpg" alt="第4张" /></a>
    <a href="#" target="_blank"><img src="images/flash5.jpg" alt="第5张" /></a>
    </div>
    <ul class="buttons">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <ul>
    </div>
  
  </div>
</body>
</html>