轮播

轮播的实现原理

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

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

抽象出的函数组件

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

轮播范例

  • 滑动轮播效果
    代码
    点击左右的箭头能前后滑动，点击底部的框框能直接滑动到对应的图片
  • 渐变轮播效果
    代码
    自动轮播，当鼠标移到图片上时候，停止自动轮播，可以手动点击左右箭头切换图片，也可以点击底部的框框直接跳转到对应的图片
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容