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

最新推荐文章于 2024-04-15 13:49:29 发布
最新推荐文章于 2024-04-15 13:49:29 发布
阅读量346 收藏
点赞数
文章标签： ui web前端 前端 jquery 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ariss123/article/details/38387563
版权

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.οnmοuseοver=function(){clearInterval(MoveTop);}  
  32.             demo.οnmοuseοut=function(){MoveTop=setInterval(boxTop,speed)}  
  33.         }  
  34.     if(e==2){  
  35.             var MoveRight=setInterval(boxRight,speed);  
  36.             demo.οnmοuseοver=function(){clearInterval(MoveRight)}  
  37.             demo.οnmοuseοut=function(){MoveRight=setInterval(boxRight,speed)}  
  38.         }  
  39.     if(e==3){  
  40.             var MoveBottom=setInterval(boxBottom,speed);  
  41.             demo.οnmοuseοver=function(){clearInterval(MoveBottom);}  
  42.             demo.οnmοuseοut=function(){MoveBottom=setInterval(boxBottom,speed)}  
  43.         }  
  44.     if(e==4){  
  45.             var MoveLeft=setInterval(boxLeft,speed)  
  46.             demo.οnmοuseοver=function(){clearInterval(MoveLeft)}  
  47.             demo.οnmοuseοut=function(){MoveLeft=setInterval(boxLeft,speed)}  
  48.         }  
  49.     if(e=="top"){  
  50.             MoveTop=setInterval(boxTop,speed)  
  51.             obj.οnmοuseοut=function(){clearInterval(MoveTop);}  
  52.         }  
  53.     if(e=="right"){  
  54.             MoveRight=setInterval(boxRight,speed)  
  55.             obj.οnmοuseοut=function(){clearInterval(MoveRight);}  
  56.         }  
  57.     if(e=="bottom"){  
  58.             MoveBottom=setInterval(boxBottom,speed)  
  59.             obj.οnmοuseοut=function(){clearInterval(MoveBottom);}  
  60.         }  
  61.     if(e=="left"){  
  62.             MoveLeft=setInterval(boxLeft,speed)  
  63.             obj.οnmοuseοut=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 οnmοuseοver="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong οnmοuseοver="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 οnmοuseοver="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong οnmοuseοver="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>  
ariss123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现图片无间断滚动代码汇总
10-25
总的来说，实现图片无间断滚动的关键在于理解JavaScript的DOM操作和事件处理机制，以及掌握如何通过定时器来实现连续的滚动动作。通过不断实践和优化，你可以创造出更加丰富和吸引人的图片滚动效果，提升网站的视觉...
Javascript实现图片不间断滚动的代码
10-22
本文将详细介绍如何使用JavaScript实现一个图片不间断滚动的代码。 首先，我们需要理解核心函数`scrollObject`的参数及其作用： 1. `obj`：目标对象ID，即需要滚动的元素ID，例如"demo"。 2. `speed`：滚动速度，...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
xiaozhen0610的博客
06-21 1887
innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth: 获取对象的滚动宽度 offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 ...
js实现图片连续滚动播放
qq_40261601的博客
02-18 3375
图片连续滚动播放效果
前端必备技能——轮播图（原生代码+插件）
最新发布
2301_76232361的博客
04-15 1278
确认插件实现的功能去官网。
javascript轮播图超详细
热门推荐
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js实现图片滚动
11-19 688
rightToLeft var speed = 30; var tab = document.getElementById("demo"); var tab1 = document.getElementById("demo1"); var tab2 = document.getElementById("demo2"); tab2.innerHTML =
javascript实现图片滚动
weixin_30371469的博客
02-11 263
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构： <body> <a href="javascript: le()">向左</a> <a href="javascript: re()">向右</a> <div id="img"> <ul id="imgul"> <li>&...
无缝隙图片向上滚动JS代码下载
11-16
【标题】"无缝隙图片向上滚动JS代码下载"所涉及的知识点主要集中在JavaScript（JS）编程语言上，尤其是关于图片滚动效果的实现。在网页设计和开发中，为了增加视觉吸引力和用户体验，常会使用JavaScript来创建动态...
无间断图片循环滚动效果特效代码
03-20
标题 "无间断图片循环滚动效果特效代码" 涉及到的是网页设计中的动态效果技术，特别是关于图片展示的一种常见交互方式。这种效果通常用于网站的轮播图或者产品展示区域，它允许图片在用户面前自动连续播放，提供一种...
JS图片不间断滚动代码(向上，向下，向左，向右)
conkeyn的专栏
01-16 735
JS不间断向左滚动 &lt;div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff&gt;&lt;table align=left cellpadding=0 cellspace=0 border=0&gt;&lt;tr&gt;&lt;td id=demo1 valign=to...
JS无间断图片循环滚动效果html版
12-04
JS无间断图片循环滚动效果html版 JS无间断 图片循环 JS滚动效果 无间断滚动
JS左右滚动的图片切换效果
02-22
JS左右滚动的图片切换效果
图片横向平滑滚动JS代码
08-05
图片横向平滑滚动JS代码，非常好用，欢迎下载
JavaScript代码实现图片循环滚动效果
01-19
1.概述 循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下： setTimeout（function,milliseconds,[arguments]） 参数说明： a. function：要调用的JavaScript自定义函数名称。 b. Milliseconds：设置超时时间（以毫秒为单位）。 功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。 3.具体实现 （1
js 图片滚动 轮播 多种效果 代码简单 详细
03-31
采用js及jquery技术实现的图片滚动以及滚轮播放效果，简单易用
无缝循环滚动图片的JS代码
小小鱼儿小小林的博客
09-26 2164
无缝循环滚动图片的JS代码，用来展示商品什么的最好了，图片URL可以自行替换，速度也可以自己调试。   无缝滚动    #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 400px; } #demo img {border: 3px solid #F2F2F2;} #indemo {width: 8
js原生无间断横向滚动字幕
01-29
js原生无间断横向滚动字幕可以通过使用HTML、CSS和JavaScript来实现。首先，我们可以在HTML中创建一个容器元素，用来存放滚动字幕内容。然后，在CSS中设置容器元素为隐藏溢出，并且内部文本为绝对定位，让它们在容器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值