这篇文章主要讲解了javascript单张多张图无缝滚动的实现方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
1.效果展示：
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}
#div1 ul{position: absolute;left: 0;}
#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}
#div1 ul li img{width:100%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aA=document.getElementsByTagName('a');//获取向右向左的箭头
var timer=null;
var iSpeed=10;
oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的
function fnMove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}//定义到边界的时候，实现无缝衔接
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
}
timer=setInterval(fnMove,30);
aA[0].onclick=function(){
iSpeed=-10;
//按下左箭头，定义向左运动
}
aA[1].onclick=function(){
iSpeed=10;
//按下右箭头，定义向右运动
}
oDiv.onmouseover=function(){
clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动
}
oDiv.onmouseout=function(){
timer=setInterval(fnMove,30);
//鼠标移出，重新开启定时器，重新运动
}
};
</script>
<body>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >←</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >→</a>
<div id="div1">
<ul>
<li><img src="miaoflash/images/1.jpg"></li>
<li><img src="miaoflash/images/2.jpg"></li>
<li><img src="miaoflash/images/3.jpg"></li>
<li><img src="miaoflash/images/4.jpg"></li>
<li><img src="miaoflash/images/5.jpg"></li>
<div ></div>
</ul>
</div>
</body>
</html>内容补充：
背景：
想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。
原理：
图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设置过渡动画的，2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。
实现：
html主要包含三块：
1、最外层盒子，用来展示滚动图的区域，overflow:hidden;
2、滚动的盒子，主要改变该盒子的定位值，来实现滚动，里面包含所有要滚动的图片或文字
3、包含图片或文字的盒子。
代码：
class Roll {
constructor(opts) {
this.elem = opts.elem; // 图片包含滚动长度的元素的
this.elemBox = opts.elemBox; //图片展示区域元素，为了获取展示区域的高度
this.direction = opts.direction;
this.time = opts.time;
this.init();
this.roll = this.roll.bind(this)
this.startRoll = this.startRoll.bind(this)
this.stopRoll = this.stopRoll.bind(this)
}
init(){
this.elemHeight = this.elem.offsetHeight;
this.elemHtml = this.elem.innerHTML;
this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
// 如果向上滚或者向左滚动每次减1，向下滚或者向右滚动每次加1
if(this.direction === 'top' || this.direction === 'left'){
this.speed = -1;
}else{
this.speed = 1;
}
}
roll(){
switch (this.direction) {
case "top":
// 如果滚动的盒子的top值超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';
}
break;
case "bottom":
// 如果滚动的盒子的bottom值超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
this.elemBox.style.bottom = 0;
}else{
this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';
}
break;
case "left":
// 如果滚动的盒子的left超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
this.elemBox.style.left = 0;
}else{
this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';
}
break;
case "right":
// 如果滚动的盒子的right超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
this.elemBox.style.right = 0;
}else{
this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';
}
break;
default:
// 默认向上滚动，如果滚动的盒子的top超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer = setInterval(this.roll,this.time)
}
}看完上述内容，是不是对javascript单张多张图无缝滚动的实现方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
