用好setTimeout,clearTimeout
或者setsetInterval,clearInterval

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css+js控制图片展示</title>
    <style>
    body{
      padding: 0px;
      margin: 0px;
      font: 70% verdana, geneva, arial, helvetica, sans-serif;
      color: #000;
      text-align: center
      }
    #outer{
      padding: 0px;
      margin: 0px;
      width: 800px;
      text-align: center
      }
    #focus{
      border: #ccc 2px solid;
      margin: 0px;
      padding: 0px;
      padding-top: 15px;
      background: url(/images/tile.gif) #eee repeat-y left top;
      width:694px;
      position: relative;
      height: 180px
      }
    #description{
      height:150px;
      overflow:hidden;
      margin-right:0px;
            float:left;
      }
    .dis{
            float:left;
            width:40px;
            text-align: center;
            padding-top:50px
    }
    #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>
    </head>
    <body>
    <div id=outer>
       <div id=focus>
          <div class="dis">
              <img id="img_l" src="btn_left.jpg" alt="向左滚动" onClick="doSlide(-1)" />
          </div>
          <div id=description class=description>
            <div id="content0">
            <ul id="content"  class="content" onMouseMove="clearTimeout(t0);clearTimeout(t2);" onMouseOut="t2=setTimeout ('auto_scroll()',3000)">        
              <li><a href="#"><img src="rounded.gif" alt="rounded" /></a></li>
      <li><a href="#"><img src="rounded.gif" alt="rounded" /></a></li>
      <li><a href="#"><img src="rounded.gif" alt="rounded" /></a></li>
      <li><a href="#"><img src="rounded2.gif" alt="rounded2" /></a></li>
      <li><a href="#"><img src="rounded2.gif" alt="rounded2" /></a></li>
      <li><a href="#"><img src="rounded2.gif" alt="rounded2" /></a></li>
      <li><a href="#"><img src="rounded3.gif" alt="rounded3" /></a></li>
      <li><a href="#"><img src="rounded3.gif" alt="rounded3" /></a></li>
      <li><a href="#"><img src="rounded3.gif" alt="rounded3" /></a></li>
            </ul>
            </div>
          </div>
          <div class="dis">
              <img id="img_r" src="btn_right.gif" alt="向右滚动" onClick="doSlide(1)" />
          </div>
        </div>
    </div>
    <script>
    var img_pad=5//图片间隔
    var img_w=188//图片宽
    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
    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;
    function doSlide(s){
    clearTimeout(t2);
    ss=s;
      if (k>=ok &&s>0){ele.scrollLeft=w;k=1;}//alert(ele.scrollLeft);
      if (k<1 &&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;
    //                    alert(x)
                        timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
                }
        )(); t2=setTimeout ("auto_scroll()",3000)
    }
    function auto_scroll(){
    doSlide(ss)
    //var t2=setTimeout ("auto_scroll()",3600)
    }
    var t0=setTimeout ("auto_scroll()",2000)
    </script>
    </body>
    </html>
      

  2.   

    ... 楼上的你是复制我的代码吗
    我这代码如果你把http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 这个加上去就不行了
    我是想看还有什么其他的代码 能实现同样的效果
      

  3.   

    貌似长度单位都没有px,还有末尾没有以;结束,我猜的,没有测试,LZ,你看看?
      

  4.   

    Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)))比较经典