JS实现图片无缝滚动的完美解决 无间隙滚动

最新推荐文章于 2022-02-18 19:52:16 发布
转载 最新推荐文章于 2022-02-18 19:52:16 发布 · 2.8k 阅读 · 2
文章标签：

#border #function #div #float

本文介绍了一种使用JavaScript实现图片在不同方向上无缝滚动的方法。通过创建两个相同的图片区域，并利用DOM属性控制滚动位置，实现了平滑且连续的滚动效果。
摘录网上
JS实现图片无缝滚动的完美解决 无间隙滚动
2007-08-09 09:31
innerHTML:    设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth: 获取对象的滚动宽度

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:   获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:    获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

-----------------------------------------------------------------------

图片向上无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

------------------------------------------------------------

图片向下无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

--------------------------------------------------------

图片向左无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

------------------------------------------------------

图片向右无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
js实现列表无间隙循环滚动
爱音乐，爱编程。
10-08 1439
无间隙循环滚动 body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */ } * { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */
js图片无缝滚动
ICY___的博客
01-19 580
虽然是一个简单的案例，但思想确实很巧妙，且一通百通！ 主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动 用利用视觉暂留效应，实现图条的无缝循环； &lt;!-- 像电子屏一样的循环滚动 --&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
js 实现图片的无缝滚动
weixin_34252686的博客
03-07 117
  js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon　 　　测试成功 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;...
Js实现图片无缝滚动
Shirongliang的博客
02-18 972
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ white-space: nowrap; display: inline-block } </style> </head> <body> &l
js无缝滚动
琳
09-30 546
无缝滚动的原理：假设轮播区域有7张图片进行轮播，当第一张图片向左移动后，轮播区域尾部必然会有空缺的区域；为了不让不能播区域有空缺，我们可以在布局的7张图片后面再加上7张同样的照片，当第一张图片向左移动后，第八张图片就会补位到轮播区域的第7个位置。然而这样只能实现一次的轮播，那么我们就考虑 使用定时器来实现无限循环。（实现步骤如下） 一、首先先布局 准备一个盒子box作为轮播区域，然后
使用Javascript简单实现图片无缝滚动
10-25
虽然有各种各样的插件可以帮助我们轻松实现这个效果，但是了解如何用原生JavaScript实现图片的无缝滚动，不仅能够提高我们的编程能力，还能让我们更好地控制滚动的效果和行为。 首先，我们需要了解几个重要的...
js实现文字内容无缝滚动动画效果
06-20
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
纯css实现无缝滚动
09-03
消息列表向上滚动，不使用js操作，纯css3实现向上无缝滚动。
JS实现图片无缝滚动的完美解决
06-18
在探讨“JS实现图片无缝滚动的完美解决方案”这一主题时，我们主要关注的是如何通过JavaScript技术，结合HTML和CSS，创建一个视觉上无间隙、流畅的图片滚动效果。这一技术在网页设计中尤为关键，尤其是在广告轮播、...
原生js实现中奖信息无间隙滚动效果
10-20
【原生JS实现中奖信息无间隙滚动效果】 在网页设计中，动态的滚动效果能够增加用户的交互体验，特别是对于展示中奖信息等重要公告时，无间隙滚动可以使信息更加吸引用户注意力。本文将探讨如何使用原生JavaScript来...
JavaScript实现图片无缝滚动效果
12-09
图片无缝滚动就是图片一直不停的滚动，好像没有无穷无尽似的，实际上就是几张图片不停的循环，但是看不出有从最后面切换到最前面的效果，这就是无缝滚动，文字和图片都可以无缝滚动，这里介绍的是图片，文字是同样的原理。 原理 以向上无缝滚动为例，其余几个方向的无缝滚动原理是一样的，点击向上无缝滚动。 设定一个可视区域，超过可视区域的部分隐藏，这里是将nav部分作为可视区域，ul#img是中包含所有的图片，实现无缝滚动的关键地方在这： if(nav.scrollTop==list[list.length-1].offsetTop){ nav.scrollTop=0 }else{ n
js实现图片的无缝循环滚动
12-05
图片的无缝循环滚动方式： 向上滚动 向下滚动 向右滚动
js无缝滚动代码制作js图片无缝滚动向上无缝滚动
11-17
js无缝滚动代码制作js图片无缝滚动向上无缝滚动 js无缝滚动代码制作js图片无缝滚动向上无缝滚动 js无缝滚动代码制作js图片无缝滚动向上无缝滚动
js实现图片无缝滚动
Mencre的博客
07-02 577
CSS：&lt;style type="text/css"&gt; #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1000px; height:368px; } #demo img { ...
js 无间隙滚动函数
mzg008的专栏
06-18 660
#speed ：速度  #demo1：包含滚动内容的div#demo2：空的div#demo：最外层的divfunction gundong(speed,demo1,demo2,demo){var speed_gd=speedvar demo1=document.getElementById(demo1);var demo2=document.getElementB
js 图片无缝滚动 横向 纵向
lbeller的博客
12-06 1368
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
Js实现无缝隙滚动
hank's blog
05-08 183
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt
JS实现双层图片文字无缝滚动技巧
### 知识点一：JavaScript无缝滚动概念 无缝滚动是一种常见的网页动态效果，特别是用于产品展示、广告轮播以及内容展示等场景。它可以让图片或文字等内容平滑连续地滚动，给人以视觉上的流畅体验。无缝滚动的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值