如何用原生JS和transform实现banner无限滚动功能？

本文共计992个文字，预计阅读时间需要4分钟。

功能+默认情况无限循环+向右移动+点击数字切换到对应图片+点击左右切换可切换图片+原理+先说原理。+在布局上所有图片都是重叠的，只需保证Y方向对齐即可，当前可见的图“

功能

• 默认情况无限循环向右移动
• 点击数字切换到对应图片
• 点击左右切换可切换图片

原理

首先说下原理。

• 在布局上所有的图片都是重叠的，即只要保证Y方向对齐即可，当前可见的图z-index层级最高。
• 每隔3s中更换一张图片，使用setTimeout定时。
• 使用gIndex记录当前可视区域的展示的是哪张图片下标，每次更换，计算下一张图片的下标。
• 通过requestAnimationFrame实现一次图片切换的动画。

这种方法也可以做到整个页面始终只有2个img标签，而不必把所有的img节点全部创建出来，要点是每次更换不可见img的src。

动画的实现

• 首先定义一个timestap，这个值记录每个帧移动多少距离。定义初始step=0，记录移动的步数。