轮播图的无缝滚动其实不难

轮播图无缝滚动原理:

1. 利用css3中的transition 进行动画的过度
2. 用css3中的transform :translateX()  进行平移
3. 在图片最后放一张第一张的图片,到最后一张的时候,迅速的跳到第一张,然后继续滚动
4. 注意跳回去的时候要将过度动画取消,再来移动
5. 在最后一个图片过度事件完成后,跳回第一张 用到transitionend事件

window.onload = function() {let focus = document.querySelector('.focus');let ul = focus.children[0]; //轮播图外面ul let w = focus.offsetWidth;let index = 0;let timer = setInterval(() => {index++;let translatex = -index * w;ul.style.transition = "all .5s ease";ul.style.transform = `translateX(${translatex}px)`;}, 2000)//过度完成的事件监听ul.addEventListener('transitionend', () => {//无缝滚动if (index == 3) { //最后一张index = 0;//去掉过度效果ul.style.transition = "none";var translatex = -index * w;ul.style.transform = `translateX(${translatex}px)`;}})
}