轮播的实现

轮播的实现

轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
  • 轮播的实现原理
    1. 轮播中容器中的图片横向水平排列
    2. 将要轮播的图片的第一个图片和最后一个图片分别克隆到 尾部和头部，当图片轮播到克隆图片时， 直接立刻跳转到对应的真实的图片上
    3. 图片滑动相对于父容器移动
    4. 通过 index对应的切换栏的大小与轮播图片对应的pageIndex 作比较，决定图片向左向右滑动，滑动时，轮播跳转（n个图片与n个切换框对应切换）
  • 接口
playNext()   //右滑，图片偏移切换
playPre() //当点击左滑按钮时，图片偏移切换
实现视频中的左右滚动无限循环轮播效果

预览

实现一个渐变轮播效果, 效果范例

预览

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 进阶17 轮播的实现
    1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 一种左...
    晓风残月1994阅读 3,199评论 0赞 0
  • 轮播的实现
    题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 原...
    魔王卡卡阅读 1,189评论 0赞 0
  • 轮播的实现
    题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 左...
    cctosuper阅读 1,800评论 0赞 0
  • 轮播的实现
    题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 左...
    yuhuan121阅读 1,807评论 0赞 0
  • 轮播的实现
    轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 轮播的实现原...
    Jeff12138阅读 2,490评论 0赞 0