简单轮播图

思路如下：

基础：用动画 + 定时器实现自动轮播

1. 动态设置图片的 transform 使图片平移，模拟轮播
2. 用 setInterval 实现无限轮播

加强：用 mouse event 实现手动轮播

1. 点击箭头或者页数的时候，调用基础第 1 步

注意：

1. 图片平移距离是基础值 * 平移倍数，基础值是一张图片的宽度，平移倍数是当前图片索引
2. 自动轮播到尽头时要换方向，用一个变量控制
3. 手动轮播到尽头时不用换方向，进行循环轮播
4. 手动轮播时要取消基础第 2 步

点击这里体验一下

参考：

十五分钟用JavaScript基础写一个图片轮播效果 + 思路详解

文中图片可能来自网络，侵删