本文介绍如何使用纯JavaScript实现图片的平滑无缝滚动效果。核心思路是通过复制内容块，利用setInterval定时器控制scrollLeft属性，当滚动距离达到临界值时瞬间重置位置，从而在视觉上形成无限循环。文章包含完整的HTML结构、CSS样式及JS逻辑代码，并详细解析了scrollLeft与offsetWidth的关键作用。
纯JS实现图片无缝滚动效果
本文介绍如何使用纯JavaScript实现图片的平滑无缝滚动效果。
首先展示最终实现的视觉效果：
网页样式与布局
接下来定义网页的基础样式：
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 1280px;
height:200px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}页面布局结构如下：
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="banner.jpg" border="0" /></a>
<a href="#"><img src="banner2.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
JavaScript核心逻辑
具体的JavaScript实现逻辑如下：
<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>关键属性与原理说明
在实现过程中需要注意以下几个关键点：
scrollLeft属性表示页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面宽度。
offsetWidth表示对象的可见宽度，包含滚动条等边线，其数值会随窗口显示大小的改变而变化。
setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。该方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。
理解了上述概念，即可明白具体的实现原理。
实现原理如下：首先将需要滚动的内容复制一份。当右侧div显示的内容与左侧隐藏内容的宽度相同时，将父容器左侧隐藏的内容显示出来，同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧隐藏的内容，则继续将父容器向左移动以实现隐藏。需要注意的是，由于这里将两张图片同时放入左侧，当右侧显示了一半时，会将左侧隐藏的内容完全显示出来。又因为右侧显示的内容与左侧的内容相同，从而实现了循环滚动的效果。
至此，平滑的滚动效果即告完成。
以上这篇JS平滑无缝滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。