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

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