JS图片无间断滚动代码合集

JavaScript图片滚动代码合集，向上下左右四个方向的无缝滚动代码，前端设计开发时所能用的一个图片特效，你可只用其中的一种滚动。前端框架分享

.代码  

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
  3. <head>
  4. <title>图片滚动代码合集</title>
  5. <script type="text/javascript">
  6. // 自动滚动
  7. function boxmove(d1,d2,d3,e,obj){
  8. var speed=30;
  9. var demo=document.getElementById(d1);
  10. var demo1=document.getElementById(d2);
  11. var demo2=document.getElementById(d3);
  12. demo2.innerHTML=demo1.innerHTML;
  13. function boxTop(){
  14. if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
  15. else{demo.scrollTop++}
  16. }
  17. function boxRight(){
  18. if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
  19. else{demo.scrollLeft--}
  20. }
  21. function boxBottom(){
  22. if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
  23. else{demo.scrollTop--}
  24. }
  25. function boxLeft(){
  26. if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
  27. else{demo.scrollLeft++}
  28. }
  29. if(e==1){
  30. var MoveTop=setInterval(boxTop,speed);
  31. demo.onmouseover=function(){clearInterval(MoveTop);}
  32. demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
  33. }
  34. if(e==2){
  35. var MoveRight=setInterval(boxRight,speed);
  36. demo.onmouseover=function(){clearInterval(MoveRight)}
  37. demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
  38. }
  39. if(e==3){
  40. var MoveBottom=setInterval(boxBottom,speed);
  41. demo.onmouseover=function(){clearInterval(MoveBottom);}
  42. demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
  43. }
  44. if(e==4){
  45. var MoveLeft=setInterval(boxLeft,speed)
  46. demo.onmouseover=function(){clearInterval(MoveLeft)}
  47. demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
  48. }
  49. if(e=="top"){
  50. MoveTop=setInterval(boxTop,speed)
  51. obj.onmouseout=function(){clearInterval(MoveTop);}
  52. }
  53. if(e=="right"){
  54. MoveRight=setInterval(boxRight,speed)
  55. obj.onmouseout=function(){clearInterval(MoveRight);}
  56. }
  57. if(e=="bottom"){
  58. MoveBottom=setInterval(boxBottom,speed)
  59. obj.onmouseout=function(){clearInterval(MoveBottom);}
  60. }
  61. if(e=="left"){
  62. MoveLeft=setInterval(boxLeft,speed)
  63. obj.onmouseout=function(){clearInterval(MoveLeft);}
  64. }
  65. }
  66. </script>
  67. <style type="text/css">
  68. div#a,div#b,div#c,div#d { float:left;}
  69. h2 { clear:both; }
  70. div#b,div#d,div#bb { white-space:nowrap; }
  71. </style>
  72. </head>
  73. <body>
  74. <h1>滚动合集</h1>
  75. <hr />
  76. <h2>向上</h2>
  77. <div id="a" style="overflow:hidden;height:100px;width:90px;">
  78. <div id="a1">
  79. <img src="/images/logo.gif" alt="" />
  80. <img src="/images/logo.gif" alt="" />
  81. <img src="/images/logo.gif" alt="" />
  82. <img src="/images/logo.gif" alt="" />
  83. <img src="/images/logo.gif" alt="" />
  84. <img src="/images/logo.gif" alt="" />
  85. <img src="/images/logo.gif" alt="" />
  86. <img src="/images/logo.gif" alt="" />
  87. </div>
  88. <div id="a2"></div>
  89. </div>
  90. <script type="text/javascript">
  91. boxmove("a","a1","a2",1);
  92. </script>
  93. <h2>向右</h2>
  94. <div id="b" style="overflow:hidden;height:100px;width:90px;">
  95. <div id="b1">
  96. <img src="/images/logo.gif" alt="" />
  97. <img src="/images/logo.gif" alt="" />
  98. <img src="/images/logo.gif" alt="" />
  99. <img src="/images/logo.gif" alt="" />
  100. <img src="/images/logo.gif" alt="" />
  101. <img src="/images/logo.gif" alt="" />
  102. <img src="/images/logo.gif" alt="" />
  103. <img src="/images/logo.gif" alt="" />
  104. </div>
  105. <div id="b2"></div>
  106. </div>
  107. <script type="text/javascript">
  108. boxmove("b","b1","b2",2);
  109. </script>
  110. <h2>向下</h2>
  111. <div id="c" style="overflow:hidden;height:100px;width:90px;">
  112. <div id="c1">
  113. <img src="/images/logo.gif" alt="" />
  114. <img src="/images/logo.gif" alt="" />
  115. <img src="/images/logo.gif" alt="" />
  116. <img src="/images/logo.gif" alt="" />
  117. <img src="/images/logo.gif" alt="" />
  118. <img src="/images/logo.gif" alt="" />
  119. <img src="/images/logo.gif" alt="" />
  120. <img src="/images/logo.gif" alt="" />
  121. </div>
  122. <div id="c2"></div>
  123. </div>
  124. <script type="text/javascript">
  125. boxmove("c","c1","c2",3);
  126. </script>
  127. <h2>向左</h2>
  128. <div id="d" style="overflow:hidden;height:100px;width:90px;">
  129. <div id="d1">
  130. <img src="/images/logo.gif" alt="" />
  131. <img src="/images/logo.gif" alt="" />
  132. <img src="/images/logo.gif" alt="" />
  133. <img src="/images/logo.gif" alt="" />
  134. <img src="/images/logo.gif" alt="" />
  135. <img src="/images/logo.gif" alt="" />
  136. <img src="/images/logo.gif" alt="" />
  137. <img src="/images/logo.gif" alt="" />
  138. </div>
  139. <div id="d2"></div>
  140. </div>
  141. <script type="text/javascript">
  142. boxmove("d","d1","d2",4);
  143. </script>
  144. <h2>手动滚动 - <strong onmouseover="boxmove(‘aa‘,‘aa1‘,‘aa2‘,‘top‘,this);">上</strong> <strong onmouseover="boxmove(‘aa‘,‘aa1‘,‘aa2‘,‘bottom‘,this);">下</strong></h2>
  145. <div id="aa" style="overflow:hidden;height:100px;width:90px;">
  146. <div id="aa1">
  147. <img src="/images/logo.gif" alt="" />
  148. <img src="/images/logo.gif" alt="" />
  149. <img src="/images/logo.gif" alt="" />
  150. <img src="/images/logo.gif" alt="" />
  151. <img src="/images/logo.gif" alt="" />
  152. <img src="/images/logo.gif" alt="" />
  153. <img src="/images/logo.gif" alt="" />
  154. <img src="/images/logo.gif" alt="" />
  155. </div>
  156. <div id="aa2"></div>
  157. </div>
  158. <h2>手动滚动 - <strong onmouseover="boxmove(‘bb‘,‘bb1‘,‘bb2‘,‘left‘,this);">左</strong> <strong onmouseover="boxmove(‘bb‘,‘bb1‘,‘bb2‘,‘right‘,this);">右</strong></h2>
  159. <div id="bb" style="overflow:hidden;height:100px;width:90px;">
  160. <div id="bb1">
  161. <img src="/images/logo.gif" alt="" />
  162. <img src="/images/logo.gif" alt="" />
  163. <img src="/images/logo.gif" alt="" />
  164. <img src="/images/logo.gif" alt="" />
  165. <img src="/images/logo.gif" alt="" />
  166. <img src="/images/logo.gif" alt="" />
  167. <img src="/images/logo.gif" alt="" />
  168. <img src="/images/logo.gif" alt="" />
  169. </div>
  170. <div id="bb2"></div>
  171. </div>
  172. </body>
  173. </html>

JS图片无间断滚动代码合集

时间： 2024-10-02 10:38:20

JS图片无间断滚动代码合集的相关文章

Js上下左右无缝隙滚动代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

无间断滚动的新闻文章列表

<!--Quirks Mode--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

JavaScript js无间断滚动效果 scrollLeft方法 使用模板

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> 无间断滚动scrollLeft套用模板 </title> <meta name="Keywords" content=""> <meta name="Description" content=""

javascript -- (无间断滚动图片)

无间断滚动图片 --原理(定时器 每隔.1秒调用一次滚动的函数) /***body**/ <div id="wrap"> <div id="box"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg

js验证网址等Javascript常见验证代码合集

发一个利用js验证网址是否正确,email格式是否正确,是否为数字及数字的范围,密码或字符长度及是否相等及要求的最小字符串长度,输入是否为空等Javascript常见验证代码合集,用的上的朋友可以拿去了自行添加整理. 关键的JavaScript代码函数: 查看代码 打印 001 /** 002 * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. 003 * 004 * @author www.phpernote.com 005 * @versi

DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一个滚动的文本字幕,应用于文字.图片.表格. DIV+CSS图片不间断滚动jquery特效,横向不间断不停滚动CSS特效,使用JQ+DIV实现非常实用简单兼容各大浏览器的图片不间断滚动特效(CSS+JQ不间断滚动图片). 使用方法如下: 1.加载JavaScript. 1 <script type=&qu

iOS开发中经常用的实用代码合集

iOS开发中经常用的实用代码合集 本文整理了,在iOS开发中我们所遇到一些开发问题的技巧类的代码,让你在开发过程中避免了很多弯路,希望能给你的开发带来帮助和启发. 1.判断邮箱格式是否正确的代码: // 利用正则表达式验证 -( BOOL )isValidateEmail:( NSString  *)email { NSString  *emailRegex =  @"[A-Z0-9a-z._%+-][email protected][A-Za-z0-9.-]+\\.[A-Za-z]{2,4}&

IOS实现文字水平无间断滚动

IOS实现文字水平无间断滚动 IOS跑马灯效果,实现文字水平无间断滚动,示例代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer *timer; UIScrollView *scrollViewText; } @property (nonatomic ,strong) NSArray *arrData; @end ViewController.m

转载：2013计算机视觉代码合集

转载,原文地址http://blog.csdn.net/daoqinglin/article/details/23607079 -------------------------------------------------------------------------- 来源: http://www.yuanyong.org/cv/cv-code-one.html http://www.yuanyong.org/cv/cv-code-two.html http://www.yuanyong