图片左右循环连续滚动代码,解决marquee的留白问题

网上收集的:

可以自己修改,达到鼠标控制箭头呈现向左向右的效果。

JavaScript代码
  1. 向上:   
  2.   
  3. <div id=demo style="overflow:hidden; width:128px; height:300px;">    
  4. <div id=demo1>    
  5. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  6. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  7. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  8. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  9. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  10. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  11. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  12. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  13. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  14. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  15. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  16. </div>    
  17. <div id=demo2></div>    
  18. </div>    
  19. <script language="javascript">    
  20. var speed=30    
  21. demo2.innerHTML=demo1.innerHTML    
  22. function Marquee(){    
  23. if(demo2.offsetTop-demo.scrollTop<=0)    
  24. demo.scrollTop-=demo1.offsetHeight    
  25. else{    
  26. demo.scrollTop++    
  27. }    
  28. }    
  29. var MyMar=setInterval(Marquee,speed)    
  30. demo.onmouseover=function() {clearInterval(MyMar)}    
  31. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}    
  32. </script>    
  33.   
  34. 向下:    
  35.   
  36. <div id=demo style="overflow:hidden; width:128px; height:300px;">    
  37. <div id=demo1>    
  38. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  39. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  40. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  41. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  42. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  43. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  44. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  45. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  46. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  47. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  48. <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>    
  49. </div>    
  50. <div id=demo2></div>    
  51. </div>    
  52. <script language="javascript">    
  53. var speed=30    
  54. demo2.innerHTML=demo1.innerHTML    
  55. demo.scrollTop=demo.scrollHeight    
  56. function Marquee(){    
  57. if(demo1.offsetTop-demo.scrollTop>=0)    
  58. demo.scrollTop+=demo2.offsetHeight    
  59. else{    
  60. demo.scrollTop--    
  61. }    
  62. }    
  63. var MyMar=setInterval(Marquee,speed)    
  64. demo.onmouseover=function() {clearInterval(MyMar)}    
  65. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}    
  66. </script>    
  67.   
  68. 向左:    
  69. <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left    
  70.   
  71. cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img    
  72.   
  73. src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img    
  74.   
  75. src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>    
  76. <script>    
  77. var speed=30    
  78. demo2.innerHTML=demo1.innerHTML    
  79. function Marquee(){    
  80. if(demo2.offsetWidth-demo.scrollLeft<=0)    
  81. demo.scrollLeft-=demo1.offsetWidth    
  82. else{    
  83. demo.scrollLeft++    
  84. }    
  85. }    
  86. var MyMar=setInterval(Marquee,speed)    
  87. demo.onmouseover=function() {clearInterval(MyMar)}    
  88. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}    
  89. </script>    
  90.   
  91. 向右:   
  92.   
  93. <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left    
  94.   
  95. cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img    
  96.   
  97. src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img    
  98.   
  99. src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>    
  100. <script>    
  101. var speed=30    
  102. demo2.innerHTML=demo1.innerHTML    
  103. demo.scrollLeft=demo.scrollWidth    
  104. function Marquee(){    
  105. if(demo.scrollLeft<=0)    
  106. demo.scrollLeft+=demo2.offsetWidth    
  107. else{    
  108. demo.scrollLeft--    
  109. }    
  110. }    
  111. var MyMar=setInterval(Marquee,speed)    
  112. demo.onmouseover=function() {clearInterval(MyMar)}    
  113. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}    
  114. </script>   

1条评论

viatop

图片左右循环连续滚动代码-"可以自己修改,达到鼠标控制箭头呈现向左向右的效果。" 可能有些麻烦,需要理清思路就可以了.

回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕