轮播的实现原理
- 轮播是把图片浮动水平排列。
- 然后设置一个视窗，大小等于一张图片。
- 视窗的
overflow设置为hidden，溢出部分不可见。
- 点击下一页，所有图片就水平移动一个宽度。
就像一张胶卷，每次展示一张图片，通过移动胶卷来切换可视的图片。
抽象出的函数组件
-
playPre() 上一页
-
setBullet() 设置底部的小方块
轮播范例
-
滑动轮播效果
代码
点击左右的箭头能前后滑动，点击底部的框框能直接滑动到对应的图片
-
渐变轮播效果
代码
自动轮播，当鼠标移到图片上时候，停止自动轮播，可以手动点击左右箭头切换图片，也可以点击底部的框框直接跳转到对应的图片
