轮播

轮播的实现原理

1. 轮播是把图片浮动水平排列。
2. 然后设置一个视窗，大小等于一张图片。
3. 视窗的overflow设置为hidden，溢出部分不可见。
4. 点击下一页，所有图片就水平移动一个宽度。

就像一张胶卷，每次展示一张图片，通过移动胶卷来切换可视的图片。

抽象出的函数组件

• playNext() 下一页

• playPre() 上一页
• setBullet() 设置底部的小方块

轮播范例

• 滑动轮播效果
  代码
  点击左右的箭头能前后滑动，点击底部的框框能直接滑动到对应的图片

• 渐变轮播效果
  代码
  自动轮播，当鼠标移到图片上时候，停止自动轮播，可以手动点击左右箭头切换图片，也可以点击底部的框框直接跳转到对应的图片