控制它的滚动条进行滚动
且此时对这组图片进行复制并添加进原图片组中，现在就有两组图片了。你可以想象一下，现在滚动条继续滚动，原来那组图片最后一张图片已经滚至顶端且消失，复制的那组图片的第一张跟在原图最后一张图片后出现，此时你就能感觉到无缝滚动了，而就在此刻我们将滚动条高度设置为0（因为速度很快，所以不会出现停顿感），你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加，以及滚动条距离的获取和修改。网上代码很多，都是基于这类构思
还有就是用原生js模仿jQuery写一个动画函数，最简单版的就是：var timer = null
function ani(ele,target) {
clearInterval(ele.timer)
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10
step = step>0?Math.ceil(step):Math.floor(step)
ele.style.left = ele.offsetLeft + step + "px"
console.log(1)
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px"
clearInterval(ele.timer)
}
},30)
}
利用动画实现图片位置的移动，也是放一个图片到前面。
第二个就是还是放一张图到前面，然后把带图片的li定位；用一个arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}]这样的数组把值分别赋给li；要滚动的时候把arr的最后一项放到最前面，再依次赋值给li，加上过渡就是轮播了，当然直接跳的那一下把过渡关了才是无缝轮播。
<!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>
纯手敲 觉得有用可以点个赞啊
