js上下左右无限循环滚动,js上下滚动效果

淡淡的烟草味﹌ 2022-08-14 03:42 423阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</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/wall_s3.jpg"></p>
  11. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  12. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  13. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  14. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  15. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  16. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  17. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  18. </div>
  19. <div id="colee2"></div>
  20. </div>
  21. <script>
  22. var speed=30;
  23. var colee2=document.getElementById("colee2");
  24. var colee1=document.getElementById("colee1");
  25. var colee=document.getElementById("colee");
  26. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
  27. function Marquee1(){
  28. //当滚动至colee1与colee2交界时
  29. /*if(colee2.offsetTop-colee.scrollTop<=0){
  30. colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
  31. }else{
  32. colee.scrollTop++
  33. }*/
  34. //无限循环
  35.     if(colee.scrollTop>=colee1.offsetHeight){
  36.         colee.scrollTop=0;
  37.     }
  38.     else
  39.     {
  40.         colee.scrollTop++;
  41.     }
  42. }
  43. var MyMar1=setInterval(Marquee1,speed)//设置定时器
  44. //鼠标移上时清除定时器达到滚动停止的目的
  45. colee.οnmοuseοver=function() {clearInterval(MyMar1)}
  46. //鼠标移开时重设定时器
  47. colee.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
  48. </script>
  49. <!--向上滚动代码结束-->
  50. <br>
  51. <!--下面是向下滚动代码-->
  52. <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
  53. <div id="colee_bottom1">
  54. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  55. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  56. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  57. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  58. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  59. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  60. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  61. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  62. <p><img src="/jscss/demoimg/wall_s3.jpg"></p>
  63. </div>
  64. <div id="colee_bottom2"></div>
  65. </div>
  66. <script>
  67. var speed=30
  68. var colee_bottom2=document.getElementById("colee_bottom2");
  69. var colee_bottom1=document.getElementById("colee_bottom1");
  70. var colee_bottom=document.getElementById("colee_bottom");
  71. colee_bottom2.innerHTML=colee_bottom1.innerHTML
  72. colee_bottom.scrollTop=colee_bottom.scrollHeight
  73. function Marquee2(){
  74. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
  75. colee_bottom.scrollTop+=colee_bottom2.offsetHeight
  76. else{
  77. colee_bottom.scrollTop--
  78. }
  79. }
  80. var MyMar2=setInterval(Marquee2,speed)
  81. colee_bottom.οnmοuseοver=function() {clearInterval(MyMar2)}
  82. colee_bottom.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
  83. </script>
  84. <!--向下滚动代码结束-->
  85. <br>
  86. <!--下面是向左滚动代码-->
  87. <div id="colee_left" style="overflow:hidden;width:500px;">
  88. <table cellpadding="0" cellspacing="0" border="0">
  89. <tr><td id="colee_left1" valign="top" align="center">
  90. <table cellpadding="2" cellspacing="0" border="0">
  91. <tr align="center">
  92. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  93. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  94. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  95. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  96. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  97. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  98. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  99. </tr>
  100. </table>
  101. </td>
  102. <td id="colee_left2" valign="top"></td>
  103. </tr>
  104. </table>
  105. </div>
  106. <script>
  107. //使用div时，请保证colee_left2与colee_left1是在同一行上.
  108. var speed=30//速度数值越大速度越慢
  109. var colee_left2=document.getElementById("colee_left2");
  110. var colee_left1=document.getElementById("colee_left1");
  111. var colee_left=document.getElementById("colee_left");
  112. colee_left2.innerHTML=colee_left1.innerHTML
  113. function Marquee3(){
  114. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
  115. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
  116. else{
  117. colee_left.scrollLeft++
  118. }
  119. }
  120. var MyMar3=setInterval(Marquee3,speed)
  121. colee_left.οnmοuseοver=function() {clearInterval(MyMar3)}
  122. colee_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}
  123. </script>
  124. <!--向左滚动代码结束-->
  125. <br>
  126. <!--下面是向右滚动代码-->
  127. <div id="colee_right" style="overflow:hidden;width:500px;">
  128. <table cellpadding="0" cellspacing="0" border="0">
  129. <tr><td id="colee_right1" valign="top" align="center">
  130. <table cellpadding="2" cellspacing="0" border="0">
  131. <tr align="center">
  132. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  133. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  134. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  135. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  136. <td><p><img src="/jscss/demoimg/wall_s3.jpg"></p></td>
  137. </tr>
  138. </table>
  139. </td>
  140. <td id="colee_right2" valign="top"></td>
  141. </tr>
  142. </table>
  143. </div>
  144. <script>
  145. var speed=30//速度数值越大速度越慢
  146. var colee_right2=document.getElementById("colee_right2");
  147. var colee_right1=document.getElementById("colee_right1");
  148. var colee_right=document.getElementById("colee_right");
  149. colee_right2.innerHTML=colee_right1.innerHTML
  150. function Marquee4(){
  151. if(colee_right.scrollLeft<=0)
  152. colee_right.scrollLeft+=colee_right2.offsetWidth
  153. else{
  154. colee_right.scrollLeft--
  155. }
  156. }
  157. var MyMar4=setInterval(Marquee4,speed)
  158. colee_right.οnmοuseοver=function() {clearInterval(MyMar4)}
  159. colee_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
  160. </script>
  161. <!--向右滚动代码结束-->
  162. </body>
  163. </html>

发表评论

表情：
评论列表 （有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读

    相关 js左右无缝滚动代码

    无缝滑动图片的原理是用一个div1来装所有图片，再复制一个同样的div2，将这两个div放在一个indiv里面，外面再包一个div。通过控制最外层div的scollLeft实现

    桃扇骨桃扇骨/ 0 赞/ 334 阅读