控制它的滚动条进行滚动
且此时对这组图片进行复制并添加进原图片组中，现在就有两组图片了。你可以想象一下，现在滚动条继续滚动，原来那组图片最后一张图片已经滚至顶端且消失，复制的那组图片的第一张跟在原图最后一张图片后出现，此时你就能感觉到无缝滚动了，而就在此刻我们将滚动条高度设置为0（因为速度很快，所以不会出现停顿感），你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加，以及滚动条距离的获取和修改。网上代码很多，都是基于这类构思
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.wrap{width:800pxheight:500pxmargin:200px auto 0position: relativeborder:1px solid #000overflow: hidden}
h1{position: absoluteleft:800pxword-break: keep-all}
</style>
<body>
<div class="wrap">
<h1>这是无缝滚动</h1>
<h1>这是无缝滚动</h1>
</div>
<script>
var wenzi=document.querySelectorAll("h1")
var speed1=0
var speed2=0
var flag=false
setInterval(function(){
speed1-=10
wenzi[0].style.left=800+speed1+"px"
wenzi[1].style.left=800+speed2+"px"
if(wenzi[0].offsetLeft==0){
flag=true
}
if(flag){
speed2-=10
}
if(wenzi[0].offsetLeft==0){
speed2=0
}
if(wenzi[1].offsetLeft==0){
speed1=0
}
},60)
</script>
</body>
</html>
纯手敲 觉得有用可以点个赞啊
因为#scroll和#wrap上面都有一些关键样式，尤其的#scroll js事件就是控制它的。如果真要去一个，要把#wrap的样式写到#scroll里，主要相同的样式别冲突，当然最好是别去掉。
