QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

html基础

常用JS图片滚动(无缝、平滑、上下左右滚动)代

 admin  2013-08-10 14:01:00

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net</title> 
  6. </head> 
  7. <body> 
  8. <div id="colee" style="overflow:hidden;height:253px;width:410px;"> 
  9. <div id="colee1"> 
  10. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  11. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  12. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  13. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  14. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  15. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  16. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  17. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  18. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  19. </div> 
  20. <div id="colee2"></div> 
  21. </div> 
  22. <script> 
  23. var speed=30
  24. var colee2=document.getElementById("colee2"); 
  25. var colee1=document.getElementById("colee1"); 
  26. var colee=document.getElementById("colee"); 
  27. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2 
  28. function Marquee1(){ 
  29. //当滚动至colee1与colee2交界时 
  30. if(colee2.offsetTop-colee.scrollTop<=0){ 
  31.  colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端 
  32.  }else{ 
  33.  colee.scrollTop++ 
  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. <br> 
  42. <!--下面是向下滚动代码--> 
  43. <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> 
  44. <div id="colee_bottom1"> 
  45. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  46. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  47. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  48. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  49. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  50. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  51. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  52. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  53. <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 
  54. </div> 
  55. <div id="colee_bottom2"></div> 
  56. </div> 
  57. <script> 
  58. var speed=30 
  59. var colee_bottom2=document.getElementById("colee_bottom2"); 
  60. var colee_bottom1=document.getElementById("colee_bottom1"); 
  61. var colee_bottom=document.getElementById("colee_bottom"); 
  62. colee_bottom2.innerHTML=colee_bottom1.innerHTML 
  63. colee_bottomcolee_bottom.scrollTop=colee_bottom.scrollHeight 
  64. function Marquee2(){ 
  65. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0) 
  66. colee_bottom.scrollTop+=colee_bottom2.offsetHeight 
  67. else{ 
  68. colee_bottom.scrollTop-- 
  69. var MyMar2=setInterval(Marquee2,speed) 
  70. colee_bottom.onmouseover=function() {clearInterval(MyMar2)} 
  71. colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} 
  72. </script> 
  73. <!--向下滚动代码结束--> 
  74. <br> 
  75. <!--下面是向左滚动代码--> 
  76. <div id="colee_left" style="overflow:hidden;width:500px;"> 
  77. <table cellpadding="0" cellspacing="0" border="0"> 
  78. <tr><td id="colee_left1" valign="top" align="center"> 
  79. <table cellpadding="2" cellspacing="0" border="0"> 
  80. <tr align="center"> 
  81. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  82. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  83. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  84. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  85. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  86. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  87. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  88. </tr> 
  89. </table> 
  90. </td> 
  91. <td id="colee_left2" valign="top"></td> 
  92. </tr> 
  93. </table> 
  94. </div> 
  95. <script> 
  96. //使用div时,请保证colee_left2与colee_left1是在同一行上. 
  97. var speed=30//速度数值越大速度越慢 
  98. var colee_left2=document.getElementById("colee_left2"); 
  99. var colee_left1=document.getElementById("colee_left1"); 
  100. var colee_left=document.getElementById("colee_left"); 
  101. colee_left2.innerHTML=colee_left1.innerHTML 
  102. function Marquee3(){ 
  103. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 
  104. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度 
  105. else{ 
  106. colee_left.scrollLeft++ 
  107. var MyMar3=setInterval(Marquee3,speed) 
  108. colee_left.onmouseover=function() {clearInterval(MyMar3)} 
  109. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} 
  110. </script> 
  111. <!--向左滚动代码结束--> 
  112. <br> 
  113. <!--下面是向右滚动代码--> 
  114. <div id="colee_right" style="overflow:hidden;width:500px;"> 
  115. <table cellpadding="0" cellspacing="0" border="0"> 
  116. <tr><td id="colee_right1" valign="top" align="center"> 
  117. <table cellpadding="2" cellspacing="0" border="0"> 
  118. <tr align="center"> 
  119. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  120. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  121. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  122. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  123. <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 
  124. </tr> 
  125. </table> 
  126. </td> 
  127. <td id="colee_right2" valign="top"></td> 
  128. </tr> 
  129. </table> 
  130. </div> 
  131. <script> 
  132. var speed=30//速度数值越大速度越慢 
  133. var colee_right2=document.getElementById("colee_right2"); 
  134. var colee_right1=document.getElementById("colee_right1"); 
  135. var colee_right=document.getElementById("colee_right"); 
  136. colee_right2.innerHTML=colee_right1.innerHTML 
  137. function Marquee4(){ 
  138. if(colee_right.scrollLeft<=0) 
  139. colee_right.scrollLeft+=colee_right2.offsetWidth 
  140. else{ 
  141. colee_right.scrollLeft-- 
  142. var MyMar4=setInterval(Marquee4,speed) 
  143. colee_right.onmouseover=function() {clearInterval(MyMar4)} 
  144. colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} 
  145. </script> 
  146. <!--向右滚动代码结束--> 
  147. </body> 
  148. </html> 

 

¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《常用JS图片滚动(无缝、平滑、上下左右滚动)代》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/htmljc/133.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序