3天了 还是没搞定这个js

var img_pad=5//图片间隔 
var img_w=188//图片宽 
var img_n=3//每窗图片数 修改好就可以了 

解决方案 »

  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; 
    } 
    .content img {border:0px; width:75px;margin-top:36px;} 
    </STYLE> 
    </head> 
    <body> 
    <div id=outer> 
        <div id=focus> 
           <div class="dis"> 
               <img id="img_l" src="http://www.1netmedia.net/base/attachments/month_200708/btn_left.jpg" alt="向左滚动" onclick="doSlide(-1)" /> 
           </div> 
           <div id=description class=description> 
             <div id="content0"> 
             <ul id="content"  class=content>         
               <li> <a href="#"> <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"/> </a> </li> 
              <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"/> </a> </li> 
              <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"/> </a> </li> 
              <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"/> </a> </li> 
              <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"/> </a> </li> 
              <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"/> </a> </li> 
          
              <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"/> </a> </li> 
              <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"/> </a> </li> 
              <li> <a href="#">  
             </ul> 
             </div> 
           </div> 
           <div class="dis"> 
               <img id="img_r" src="http://www.1netmedia.net/base/attachments/month_200708/btn_right.gif" alt="向右滚动" onclick="doSlide(1)" /> 
           </div> 
         </div> 
    </div> 
    <script> 
    var img_pad=5//图片间隔 
    var img_w=75//图片宽 
    var img_n=4//每窗图片数 
    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/4)-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) 
    } 
    setTimeout ("auto_scroll()",2000) 
    </script> 
    </body> 
    </html>
      

  2.   

    给你说说要改的几个地方 
    顺便 说说写这个东西人 太不仔细了 风格不好var img_pad=5//图片间隔  
    var img_w=188//图片宽  -> var img_w=140
    var img_n=3//每窗图片数  ->var img_n=4
    var ok=Math.ceil(ok_obj.length/3)-1; -> var ok=Math.ceil(ok_obj.length/img_n)-1; 最重要的地方 就是 他在 <li> 引用的图片的地方 没引用 宽高 所以 得到结果 图片一定是 img 高宽 这个很隐蔽所以 一个修改是 把你自己图片 引用 替换好 
     
    另个修改方法是在 js中定义 img 宽高 和 img_w 联系上..............
      

  3.   

    我上面宽度回错了
    更正下 是var img_w=188//图片宽  -> var img_w=75
    然后添加一句 规定img宽度的
    document.write (" <style>.content img {width: "+ img_w+"px;} </style>") 
    这样 每次修改的时候 <li> 可以不考虑图片宽度 直接改 var img_pad=5//图片间隔   
    var img_w=188//图片宽  
    var img_n=3//每窗图片数  就可以了
      

  4.   

    var img_pad=5//图片间隔 
    var img_w=188//图片宽 
    var img_n=3//每窗图片数 只改这里就可以
    还有你的图片比例与他程序的图片比例一样吗？
    不一样得该下代码
      

  5.   

    var ok=Math.ceil(ok_obj.length/4)-1; 
    这个地方也要改
    这个他的是3张图片的，你再调调成你要的
      

  6.   

    是我见过的 最棒的 还带倒影
    http://www.robarov.be/
    不过要结合你的 你得自己分析咯
      

  7.   

        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) 这种写法以前没见过...啥意思？
      

  8.   


    现在不在家 你也不一定要用js的啊 看哪个flash载入简单 用flash的好了 以后修改也还方便
      

  9.   

    也可以用淘宝这种载入,你4张图片做成一张,然后 轮流载入更简练!
    http://www.taobao.com/
      

  10.   

     flash不好做成动态的啊 是想要可以自己滚动 也可以用按扭控制滚动
      

  11.   

    <!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: 400px; 
      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:394px; 
      position: relative; 
      height: 80px 
      } 
    #description{ 
      height:80px; 
      overflow:hidden; 
      margin-right:0px; 
      float:left; 
      } 
    .dis{ 
      float:left; 
      width:10px; 
      text-align: center; 
      padding-top:10px 
    } 
    #description ul, #description li { 
      float:left; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    height:80px 
    } 
    .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="http://www.1netmedia.net/base/attachments/month_200708/btn_left.jpg" alt="向左滚动" onclick="doSlide(-1)" /> 
           </div> 
           <div id=description class=description> 
             <div id="content0"> 
             <ul id="content"  class=content>         
               <li> <a href="#"> <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li><li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li>
             </ul> 
             </div> 
           </div> 
           <div class="dis"> 
               <img id="img_r" src="http://www.1netmedia.net/base/attachments/month_200708/btn_right.gif" alt="向右滚动" onclick="doSlide(1)" /> 
           </div> 
         </div> 
    </div> 
    <script> 
    var img_pad=5//图片间隔 
    var img_w=75//图片宽 
    var img_n=4//每窗图片数 
    document.write (" <style>.content a {padding: 0 "+ img_pad+" 0 "+ img_pad+";} </style>") 
    var win_w=img_w*img_n+(img_pad*4)*(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/4)-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) 
    } 
    setTimeout ("auto_scroll()",2000) 
    </script> 
    </body> 
    </html> IE6和FF测试都没有问题
      

  12.   

    下面这个改了var win_w=img_w*img_n+(img_pad*4)*(img_n-1)-5 后面减5效果好多了
    <!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: 400px; 
      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:394px; 
      position: relative; 
      height: 80px 
      } 
    #description{ 
      height:80px; 
      overflow:hidden; 
      margin-right:0px; 
      float:left; 
      } 
    .dis{ 
      float:left; 
      width:10px; 
      text-align: center; 
      padding-top:10px 
    } 
    #description ul, #description li { 
      float:left; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    height:80px 
    } 
    .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="http://www.1netmedia.net/base/attachments/month_200708/btn_left.jpg" alt="向左滚动" onclick="doSlide(-1)" /> 
           </div> 
           <div id=description class=description> 
             <div id="content0"> 
             <ul id="content"  class=content>         
               <li> <a href="#"> <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li> <li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li><li> <a href="#"> 
           <img  
              src="http://www.1netmedia.net/base/attachments/month_200708/rounded-12.gif" width="75"> </a> </li>
             </ul> 
             </div> 
           </div> 
           <div class="dis"> 
               <img id="img_r" src="http://www.1netmedia.net/base/attachments/month_200708/btn_right.gif" alt="向右滚动" onclick="doSlide(1)" /> 
           </div> 
         </div> 
    </div> 
    <script> 
    var img_pad=5//图片间隔 
    var img_w=75//图片宽 
    var img_n=4//每窗图片数 
    document.write (" <style>.content a {padding: 0 "+ img_pad+" 0 "+ img_pad+";} </style>") 
    var win_w=img_w*img_n+(img_pad*4)*(img_n-1)-5 
    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/4)-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) 
    } 
    setTimeout ("auto_scroll()",2000) 
    </script> 
    </body> 
    </html> 
      

  13.   

     I SEE ，thank you~~
      

  14.   

    给你发2个 滚动的 看效果如何 
    如果还行 就打包给你
    1.不带手动控制的
    http://wood-son.com/temp/code/scroll1.html
    2.带手动控制的
    http://wood-son.com/temp/code/scroll2/
      

  15.   

    再发一个 与你顶楼原理差不多的一个效果 但定位准确 没弄自动滚动 和前后滚动 需要的话 你自己改改
    http://wood-son.com/temp/code/scroll3/
      

  16.   

    我看这个效果 对齐的问题 
    可能在于 有没有考虑到img_pad 对宽度的影响 
    最后发的这个是没 img_pad 的 
    所以不会存在 左右 空白 
      

  17.   

    大哥你把这2个打包给我把 
    你这个http://wood-son.com/temp/code/scroll2/ 是小图把 不是整张大图把 
      

  18.   

    http://wood-son.com/temp/code/scroll2/ 
    是从上面 我给的 那个网址 改过来的 
      

  19.   

    发了 下了 留个言 保持2小时
    http://wood-son.com/temp/code/s.rar
      

  20.   

    还有个问题啊 就是 你那js怎么图片的高度啊 我的图片是75*80
    高度是80 在哪个js里面改啊
      

  21.   

    http://www.lengta.com:9081/shopping/cp_2049.html#  这个是我们的地址 我换成自己的图片就用不行了 ...
      

  22.   

    在js目录 里面 一个 r开头的改 
    我刚把代码删除了 晕