感觉是对的 效果是错的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
#ss{  width:130px;height:88px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
#ss ul{margin:0px; padding:0px;}
#ss ul li{ margin:0px; padding:0px; list-style:none; display:inline;}
</style>
<body><div id='ss'>
<ul>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
</ul>
</div>
<div id='s'></div>
<script>
/////////////////////////////////////////////////////////////////////////////////
var Tween = {
    Elastic: {
        easeOut: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
        }
    }
}
/////////////////////////////////////////////////////////////////////////////////function $(Id){return document.getElementById(Id)};
var n = $('ss').getElementsByTagName('li').length-1;
var w = $('ss').getElementsByTagName('li')[0].offsetWidth;
var i=0,t=0,b=0,c=w,d=110;function Run(){
$('ss').scrollLeft = Math.ceil(Tween.Elastic.easeOut(t,b,c,d));
if(t<d)
{ t++;setTimeout(Run, 10);}
else{
if(i==(n-1))
{$('ss').scrollLeft=0;i=0,b=0,c=w,t=0}
else
{t=0,b=c,c=c+w,i++;}  //这里b=c  和c=c+w  就是重新赋值了  感觉按每次移动一个图片大小的位置来看 没有错误呀，  为什么效果会不对了？
$('s').innerHTML=$('ss').scrollLeft;setTimeout(Run, 1000);
}
};
setTimeout(Run,2000);
</script>
</body>

解决方案 »

  1.   

    我晕 
    我写setTimeout(Run,2000);只是希望不要一开始就晃  看不清第一张图片是啥
      

  2.   


    <style type="text/css">
    #ss{  width:130px;height:88px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
    #ss ul{margin:0px; padding:0px;}
    #ss ul li{ margin:0px; padding:0px; list-style:none; display:inline;}
    </style>
    <body><div id='ss'>
    <ul>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    </ul>
    </div>
    <div id='s'></div>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    <script>
    /////////////////////////////////////////////////////////////////////////////////
    var Tween = {
        Elastic: {
            easeOut: function(t,b,c,d,a,p){
                if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
                else var s = p/(2*Math.PI) * Math.asin (c/a);
                return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
            }
        }
    }
    /////////////////////////////////////////////////////////////////////////////////function $(Id){return document.getElementById(Id)};
    var n = $('ss').getElementsByTagName('li').length-1;
    var w = $('ss').getElementsByTagName('li')[0].offsetWidth;
    var i=0,t=0,b=0,c=w,d=110;function Run(){
    $('ss').scrollLeft = Math.ceil(Tween.Elastic.easeOut(t,b,c,d));
    if(t<d)
    { t++;setTimeout(Run, 10);}
    else{
    if(i==(n-1))
    {$('ss').scrollLeft=0;i=0,b=0,c=w,t=0}
    else
    {i++;t=0,b=i*w,c=w;}
    $('s').innerHTML=$('ss').scrollLeft;setTimeout(Run, 1000);
    }
    };
    setTimeout(Run,2000);
    </script>
    </body>