JS实现图片无间断滚动代码汇总_javascript技巧-js教程-PHP中文网

滚动合集

向上

向右

向下

向左

上下" >手动滚动 - 上下

左右" >手动滚动 - 左右

首页

web前端

js教程

JS实现图片无间断滚动代码汇总_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

js 代码图片滚动

本文整理汇总了JavaScript实现图片滚动的常见代码，可以实现向上下左右四个方向的无缝滚动的效果，这是前端设计开发时常用的一个图片特效，你可只用其中的一种滚动效果。

具体的实例代码如下：

<!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" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>图片滚动代码合集</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
 var speed=30;
 var demo=document.getElementById(d1);
 var demo1=document.getElementById(d2);
 var demo2=document.getElementById(d3);
 demo2.innerHTML=demo1.innerHTML;
 function boxTop(){
   if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
   else{demo.scrollTop++}
  }
 function boxRight(){
   if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
   else{demo.scrollLeft--}
  }
 function boxBottom(){
   if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
   else{demo.scrollTop--}
  }
 function boxLeft(){
   if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
   else{demo.scrollLeft++}
  }
 if(e==1){
   var MoveTop=setInterval(boxTop,speed);
   demo.onmouseover=function(){clearInterval(MoveTop);}
   demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
  }
 if(e==2){
   var MoveRight=setInterval(boxRight,speed);
   demo.onmouseover=function(){clearInterval(MoveRight)}
   demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
  }
 if(e==3){
   var MoveBottom=setInterval(boxBottom,speed);
   demo.onmouseover=function(){clearInterval(MoveBottom);}
   demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
  }
 if(e==4){
   var MoveLeft=setInterval(boxLeft,speed)
   demo.onmouseover=function(){clearInterval(MoveLeft)}
   demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
  }
 if(e=="top"){
   MoveTop=setInterval(boxTop,speed)
   obj.onmouseout=function(){clearInterval(MoveTop);}
  }
 if(e=="right"){
   MoveRight=setInterval(boxRight,speed)
   obj.onmouseout=function(){clearInterval(MoveRight);}
  }
 if(e=="bottom"){
   MoveBottom=setInterval(boxBottom,speed)
   obj.onmouseout=function(){clearInterval(MoveBottom);}
  }
 if(e=="left"){
   MoveLeft=setInterval(boxLeft,speed)
   obj.onmouseout=function(){clearInterval(MoveLeft);}
  }
 }
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1 id="滚动合集">滚动合集</h1>
<hr />
<h2 id="向上">向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="a2"></div>
</div>
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>
<h2 id="向右">向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;">
<div id="b1">
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="b2"></div>
</div>
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>
<h2 id="向下">向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">
<div id="c1">
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="c2"></div>
</div>
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>
<h2 id="向左">向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;">
<div id="d1">
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="d2"></div>
</div>
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>
<h2 id="手动滚动-strong-onmouseover-boxmove-aa-aa-aa-top-this-上-strong-strong-onmouseover-boxmove-aa-aa-aa-bottom-this-下-strong">手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;">
<div id="aa1">
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="aa2"></div>
</div>
<h2 id="手动滚动-strong-onmouseover-boxmove-bb-bb-bb-left-this-左-strong-strong-onmouseover-boxmove-bb-bb-bb-right-this-右-strong">手动滚动 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghw/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="bb2"></div>
</div>
</body>
</html>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7400

Java教程

1630

CakePHP 教程

1358

Laravel 教程

1268

PHP教程

1217

显示更多

Related knowledge

小红书发布自动保存图片怎么解决？发布自动保存图片在哪里？ Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展，小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题，这让他们感到十分困扰。那么，如何解决这个问题呢？一、小红书发布自动保存图片怎么解决？1.清除缓存首先，我们可以尝试清除小红书的缓存数据。步骤如下：（1）打开小红书，点击右下角的“我的”按钮；（2）在个人中心页面，找到“设置”并点击；（3）向下滚动，找到“清除缓存”选项，点击确认。清除缓存后，重新进入小红书，尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

抖音评论里怎么发图片？评论区图片入口在哪里？ Mar 21, 2024 pm 09:12 PM

随着抖音短视频的火爆，用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片，以更好地表达自己的观点或情感。那么，抖音评论里怎么发图片呢？本文将为你详细解答这个问题，并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片？1.打开抖音：首先，你需要打开抖音APP，并登录你的账号。2.找到评论区：在浏览或发布短视频时，找到想要评论的地方，点击“评论”按钮。3.输入评论内容：在评论区输入你的评论内容。4.选择发送图片：在输入评论内容的界面，你会看到一个“图片”按钮或者“+”号按钮，点

在 iPhone 上使图片更清晰的 6 种方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时，您可能会遇到一些问题，这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步，可以让您快速拍照，但相机在某些情况下可能会错误地对焦错误的拍摄对象，从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度，以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

蓝屏代码0x0000001怎么办 Feb 23, 2024 am 08:09 AM

蓝屏代码0x0000001怎么办蓝屏错误是电脑系统或硬件出现问题时的一种警告机制，代码0x0000001通常表示出现了硬件或驱动程序故障。当用户在使用电脑时突然遇到蓝屏错误，可能会感到惊慌和无措。幸运的是，大多数蓝屏错误都可以通过一些简单的步骤进行排除和处理。本文将为读者介绍一些解决蓝屏错误代码0x0000001的方法。首先，当遇到蓝屏错误时，我们可以尝试重

ppt怎么让图片一张一张出来 Mar 25, 2024 pm 04:00 PM

在PowerPoint中，让图片逐一显示是一种常用的技巧，可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤，包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外，还提供了高级设置和调整，例如使用触发器、调整动画速度和顺序，以及预览动画效果。通过遵循这些步骤和技巧，用户可以轻松地在PowerPoint中设置图片逐一出现，从而提升演示文稿的视觉效果并吸引观众的注意力。

福昕PDF阅读器如何将pdf文档转成jpg图片-福昕PDF阅读器将pdf文档转成jpg图片的方法 Mar 04, 2024 pm 05:49 PM

你们是不是也在使用福昕PDF阅读器软件呢?那么你们知道福昕PDF阅读器如何将pdf文档转成jpg图片吗?下面这篇文章就为大伙带来了福昕PDF阅读器将pdf文档转成jpg图片的方法，感兴趣的小伙伴们快来下文看看吧。先启动福昕PDF阅读器，接着在顶部工具栏找到“特色功能”，然后选择“PDF转其他”功能。在接下来，打开一个名为“福昕pdf在线转换”的网页。在页面上方右侧点击“登录”按钮进行登录，然后打开“PDF转图片”功能。之后点击上传按钮并将想要转换成图片的pdf文件添加进来，添加完毕后点击“开始转

wps文档中两张图片怎么并排 Mar 20, 2024 pm 04:00 PM

在使用wps办公软件时，我们发现不单单只用一种形式，文字里会加入表格和图片，表格里也可以加入图片等等，这些都是兼并使用的，让整个文档的内容看起来更丰富，如果需要在文档中插入两张图片，而且需要并排排列。我们接下来的课程就可以解决这个问题：wps文档中两张图片怎么并排。1、首先需要打开WPS软件，找到你想要调整的图片。左键点击图片会弹出一个菜单栏，选择“页面布局”。2、在文字环绕中选择“紧密型环绕”。3、当需要的图片都确认设定为“紧密型文字环绕”之后，便可以把图片随意拖动到合适的位置，点击第一张图片

网页图片加载不出来怎么办？6种解决办法 Mar 15, 2024 am 10:30 AM

　　有网友发现打开浏览器网页，网页上的图片迟迟加载不出来，是怎么回事？检查过网络是正常的，那是哪里出现了问题呢？下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。　　网页图片加载不出来：　　1、网速问题　　网页显示不出图片有可能是因为电脑的网速比较慢，电脑中开启的软件比较多，　　而我们访问的图片比较大，这就可能因为加载超时，导致图片显示不出来，　　可以将比较占网速的软件将关掉，可以去任务管理器查看一下。　　2、访问人数过多　　网页显示不出图片还有可能是因为我们访问的网页，在同时间段访问的

See all articles

JS实现图片无间断滚动代码汇总_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题