分类：banner无限滚动

2020
10-08

原生JS利用transform实现banner的无限滚动示例代码

功能默认情况无限循环向右移动点击数字切换到对应图片点击左右切换可切换图片原理首先说下原理。在布局上所有的图片都是重叠的，即只要保证Y方向对齐即可，当前可见的图z-index层级最高。每隔3s中更换一张图片，使用setTimeout定时。使用gIndex记录当前可视区域的展示的是哪张图片下标，每次更换，计算下一张图片的下标。通过requestAnimationFrame实现一次图片切换的动画。这种方法也可以做到整个页面始终只有2个im... 继续阅读 >