美文网首页
轮播的实现

轮播的实现

作者: marmot_ning | 来源:发表于2017-09-29 11:23 被阅读0次

    轮播的实现

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

    预览

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

    预览

    相关文章

      网友评论

          本文标题:轮播的实现

          本文链接:https://www.haomeiwen.com/subject/mxvqextx.html