轮播

作者: DCbryant | 来源:发表于2017-08-06 17:22 被阅读30次

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

    • 布局:让父容器相对定位,设定宽高为一个图片的宽高,并且overflow:hidden;在父容器中设置一个图片容器,高度为图片高,宽度为图片宽*图片个数(这一点由js来设置,因为它的个数不是一定的);在底部设置小圆点,绝对定位居于父容器底部;
    • 逻辑:一开始将尾图片和首图片clone后,分别放在首尾;增加图片容器的宽度;当运动到clone首图片时,就立即将其移动到真实首图片,同理,当运动到clone尾图片时,就立即将其移动到真实尾图片,形成一个循环。
    • 函数接口:
    autoPlay()
    playPre()
    playNext()
    

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

    左右滚动无限循环轮播

    题目3: 实现一个渐变轮播效果, 效果范例347

    渐变轮播

    相关文章

      网友评论

          本文标题:轮播

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