美文网首页
轮播的实现

轮播的实现

作者: 进击的前端_风笑影 | 来源:发表于2017-08-15 17:11 被阅读0次

    1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())

    • 无限轮播的实现

      • 首先无限轮播是元素水平排列,然后超出窗口的都隐藏
      • 对于不是首位元素,改变定位后的元素left值
      • 对于首位,复制首位,让元素在视觉上面有一个呈现
      • 把元素回归到正确的位置,方便用户继续点击
    • 渐变轮播

      • 渐变轮播是全部都排放在一起的,不会像无限轮播水平排列
      • 利用fadeOut,fadeIn控制当前的元素隐藏,下一个元素显示
      • 隐藏不显示的图片,显示要显示的图片
      • 对应的索引变化很重要

    可以用来抽象的接口函数
    playNext()
    playPrev()
    carouselNext()
    carouselPrev()

    2:实现视频中的左右滚动无限循环轮播效果

    http://js.jirengu.com/rarorecuru/1/edit

    3: 实现一个渐变轮播效果

    http://js.jirengu.com/jotawuyifo/2/edit

    相关文章

      网友评论

          本文标题:轮播的实现

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