轮播图

作者: 普莱那 | 来源:发表于2017-03-20 00:12 被阅读81次

    轮播的实现原理是怎样的?

    轮播图的实现原理有很多,这里主要介绍一种,假设我们要做一个有四张图片的轮播图,切换的效果为滚动式,为了给用户良好的体验,我们希望当用户滚动到最后一张图片时,如果继续向右滚动的话,窗口要展示第一张图片,而不是直接反方向滚回至第一张图片,反之,如果用户滚动到第一张图片时,向左点击时也是同样的效果,看下图:

    轮播图实现原理轮播图实现原理
    这张图片介绍了我们实现的原理,具体就是我们事先分别拷贝第一份和最后一份放到我们希望出现的位置,这样,当用户滚动到最后一张图片4的时候,继续向右滚动会出现克隆图片1,然后瞬间让窗口显示真正的图片1,由于这是一瞬间发生的,用户根本无法察觉,反之也是同样的道理,这样就实现了轮动图的无限滚动。
    注意切换的瞬间,你根本察觉不到哦注意切换的瞬间,你根本察觉不到哦

    轮播图应该抽象出哪些函数(or接口)供使用?(比如 play())

    抽象出三个接口:
    向前播放 playPre()
    向后播放playNext()
    点击下侧索引条时的直接跳转播放playJump()

    滚动轮播图实现

    滚动轮播图

    渐变轮播图实现

    渐变轮播图

    相关文章

      网友评论

        本文标题:轮播图

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