JS图片无缝滚动就是html中内容超出出现下拉框自动拖拉下拉框版本。不知道该怎么怎么描述。

刚听完孙老师讲之后，感觉不是很难，但是真正让自己写的时候感觉会有好多问题，发现里面的很多东西没有讲出来，嘿嘿……跟李老师差距还是有点大哦！！

中午吃完饭回来之后，自己认真的想想，并动手实验了一下，终于明白那几条简短代码的含义了。实现图片无缝滚动的思想：当滚动条到终点的时候让它自动回到起点再次拖动它到终点。如何实现这个方法就要加一条IF语句做出判断。只要滚动的距离scrollLeft大于显示框的距离就让滚动的距离scrollLeft自动清0，否则就scrollLeft++。代码如下：

 

  1. <body> 
  2.     <div id="demo" class="outer"> 
  3.         <div id="in1" class="in"> 
  4.             <div id="demo1" class="demo1"> 
  5.                 <img src="a1.jpg" alt="" /> 
  6.                 <img src="a2.jpg" alt="" /> 
  7.                 <img src="a3.jpg" alt="" /> 
  8.                 <img src="a4.jpg" alt="" /> 
  9.                 <img src="a5.jpg" alt="" />  
  10.             </div> 
  11.             <div id="demo2" class="">&nbsp;</div> 
  12.         </div> 
  13.     </div> 
  14. <script type="text/javascript"> 
  15.         var demo=document.getElementById("demo"); 
  16.         var demo1=document.getElementById("demo1"); 
  17.         var demo2 = document.getElementById("demo2"); 
  18.         var in1 = document.getElementById("in1"); 
  19.         demo2.innerHTML = demo1.innerHTML;   
  20.         function move(){ 
  21.              
  22.             if(demo.offsetWidth<=demo.scrollLeft){ 
  23.                  
  24.                 demo.scrollLeft=0; 
  25.                  
  26.             } 
  27.             else{ 
  28.                 //alert(demo.scrollLeft); 
  29.                 demo.scrollLeft++; 
  30.             } 
  31.         } 
  32.         var bb=setInterval("move()",10); 
  33.         demo.onmouseover = function(){clearInterval(bb);} 
  34.         demo.onmouseout = function(){bb=setInterval("move()",10)} 
  35.     </script> 
  36. </body> 

说几个比较难理解的地方吧：

1.为什么子标签要是父标签的两倍以上的宽度：

当子标签的宽度小于父标签的宽度的两倍以上，就会使demo.scrollLeft到某一个小于demo.offsetWidth数值停止不动了。假设子标签的宽度是1000，当demo.scrollLeft为452的时候，demo.scrollLeft+显示的宽度552+边框的宽度=1000，所以demo.scrollLeft无法++了，但这个时候demo.offsetWidth<=demo.scrollLeft不成立，所以demo.scrollLeft无法清0.所以要是它的两倍以上

2.为什么要3div嵌套：如果两个div嵌套会出现一片空白区域，然后直接从第一个开始再次循环，不能第一个出去最后一个变为第一个了，这是因为demo1的宽度是1200，但是outer的宽度却才是550，所以它要一直循环到1100左右才会清0，这个时候三层嵌套就相当于第三层的内容demo1和demo2（demo1和demo2完全的一样）平铺在第二层上。

3.demo.offsetWidth相当于你需要让它滚动的宽度，而demo.scrollLeft相当于是你实际让它滚动的距离，这就好比汽车里程表，demo.offsetWidth只能跑的里程表，而demo.scrollLeft是你现在已经跑了的里程数

scrollLeft   和   scrollTop   对应滚动条的位置