1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head> 
  3.    <title>常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全 - www.webdm.cn</title> 
  4. </head> 
  5. <body> 
  6. <div id="colee" style="overflow:hidden;height:253px;width:410px;"> 
  7. <div id="colee1"> 
  8. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  9. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  10. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  11. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  12. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  13. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  14. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  15. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  16. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  17. </div> 
  18. <div id="colee2"></div> 
  19. </div> 
  20. <script> 
  21. var speed=30;  
  22. var colee2=document.getElementById("colee2");  
  23. var colee1=document.getElementById("colee1");  
  24. var colee=document.getElementById("colee");  
  25. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2  
  26. function Marquee1(){  
  27. //当滚动至colee1与colee2交界时  
  28. if(colee2.offsetTop-colee.scrollTop<=0){  
  29.  colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端  
  30.  }else{  
  31.  colee.scrollTop++  
  32. }  
  33. }  
  34. var MyMar1=setInterval(Marquee1,speed)//设置定时器  
  35. //鼠标移上时清除定时器达到滚动停止的目的  
  36. colee.onmouseover=function() {clearInterval(MyMar1)}  
  37. //鼠标移开时重设定时器  
  38. colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}  
  39. </script> 
  40.  
  41. <!--向上滚动代码结束--> 
  42.  
  43. <br> 
  44.  
  45. <!--下面是向下滚动代码--> 
  46.  
  47. <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> 
  48. <div id="colee_bottom1"> 
  49. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  50. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  51. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  52. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  53. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  54. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  55. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  56. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  57. <p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p> 
  58. </div> 
  59. <div id="colee_bottom2"></div> 
  60. </div> 
  61. <script> 
  62. var speed=30 
  63. var colee_bottom2=document.getElementById("colee_bottom2");  
  64. var colee_bottom1=document.getElementById("colee_bottom1");  
  65. var colee_bottom=document.getElementById("colee_bottom");  
  66. colee_bottom2.innerHTML=colee_bottom1.innerHTML  
  67. colee_bottomcolee_bottom.scrollTop=colee_bottom.scrollHeight  
  68. function Marquee2(){  
  69. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)  
  70. colee_bottom.scrollTop+=colee_bottom2.offsetHeight  
  71. else{  
  72. colee_bottom.scrollTop--  
  73. }  
  74. }  
  75. var MyMar2=setInterval(Marquee2,speed)  
  76. colee_bottom.onmouseover=function() {clearInterval(MyMar2)}  
  77. colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}  
  78. </script> 
  79.  
  80. <!--向下滚动代码结束--> 
  81.  
  82. <br> 
  83.  
  84. <!--下面是向左滚动代码--> 
  85.  
  86. <div id="colee_left" style="overflow:hidden;width:500px;"> 
  87. <table cellpadding="0" cellspacing="0" border="0"> 
  88. <tr><td id="colee_left1" valign="top" align="center"> 
  89. <table cellpadding="2" cellspacing="0" border="0"> 
  90. <tr align="center"> 
  91. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  92. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  93. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  94. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  95. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  96. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  97. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  98. </tr> 
  99. </table> 
  100. </td> 
  101. <td id="colee_left2" valign="top"></td> 
  102. </tr> 
  103. </table> 
  104. </div> 
  105. <script> 
  106. //使用div时，请保证colee_left2与colee_left1是在同一行上.  
  107. var speed=30//速度数值越大速度越慢  
  108. var colee_left2=document.getElementById("colee_left2");  
  109. var colee_left1=document.getElementById("colee_left1");  
  110. var colee_left=document.getElementById("colee_left");  
  111. colee_left2.innerHTML=colee_left1.innerHTML  
  112. function Marquee3(){  
  113. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度  
  114. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度  
  115. else{  
  116. colee_left.scrollLeft++  
  117. }  
  118. }  
  119. var MyMar3=setInterval(Marquee3,speed)  
  120. colee_left.onmouseover=function() {clearInterval(MyMar3)}  
  121. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}  
  122. </script> 
  123.  
  124. <!--向左滚动代码结束--> 
  125.  
  126. <br> 
  127.  
  128. <!--下面是向右滚动代码--> 
  129.  
  130. <div id="colee_right" style="overflow:hidden;width:500px;"> 
  131. <table cellpadding="0" cellspacing="0" border="0"> 
  132. <tr><td id="colee_right1" valign="top" align="center"> 
  133. <table cellpadding="2" cellspacing="0" border="0"> 
  134. <tr align="center"> 
  135. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  136. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  137. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  138. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  139. <td><p><img src="http://www.webdm.cn/p_w_picpaths/20100415/bg3.jpg"></p></td> 
  140. </tr> 
  141. </table> 
  142. </td> 
  143. <td id="colee_right2" valign="top"></td> 
  144. </tr> 
  145. </table> 
  146. </div> 
  147. <script> 
  148. var speed=30//速度数值越大速度越慢  
  149. var colee_right2=document.getElementById("colee_right2");  
  150. var colee_right1=document.getElementById("colee_right1");  
  151. var colee_right=document.getElementById("colee_right");  
  152. colee_right2.innerHTML=colee_right1.innerHTML  
  153. function Marquee4(){  
  154. if(colee_right.scrollLeft<=0)  
  155. colee_right.scrollLeft+=colee_right2.offsetWidth  
  156. else{  
  157. colee_right.scrollLeft--  
  158. }  
  159. }  
  160. var MyMar4=setInterval(Marquee4,speed)  
  161. colee_right.onmouseover=function() {clearInterval(MyMar4)}  
  162. colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}  
  163. </script> 
  164.  
  165. <!--向右滚动代码结束--> 
  166.  
  167. <br /> 
  168. <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！  
  169. </body> 
  170. </html> 

本源代码收集了一些常用的网页图片滚动，无缝滚动，效果很平滑，包括上下左右四个方向的滚动，或许你现在用不上这些代码，不过先收藏起来以备后用哦。