首页 > 代码库 > JS图片无间断滚动代码合集

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

2024-07-15 23:08:29   222人阅读

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=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  80. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  81. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  82. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  83. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  84. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  85. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  86. <img src=http://www.mamicode.com/"/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=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  97. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  98. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  99. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  100. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  101. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  102. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  103. <img src=http://www.mamicode.com/"/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=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  114. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  115. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  116. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  117. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  118. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  119. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  120. <img src=http://www.mamicode.com/"/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=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  131. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  132. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  133. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  134. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  135. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  136. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  137. <img src=http://www.mamicode.com/"/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=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  148. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  149. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  150. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  151. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  152. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  153. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  154. <img src=http://www.mamicode.com/"/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=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  162. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  163. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  164. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  165. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  166. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  167. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  168. <img src=http://www.mamicode.com/"/images/logo.gif" alt="" />  
  169. </div>  
  170. <div id="bb2"></div>  
  171. </div>  
  172. </body>  
  173. </html>  


联系
我们