进阶-任务17

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

  • 轮播的实现原理:


    coresel.png

    黑色边框指的是轮播窗口,即我们的可见区域
    所有要展示的图片水平排列,形成一个轨道
    当需要展示某张图片时,即移动轨道,将该图片移到可见区域
    当图片滑动到轨道边界时,例如3到1,为了能保证滑动效果的展现,一般会在3后面放置一张图片1的拷贝,当3滑动至1的拷贝时,再将真正的1移到可见区域

  • 提供的接口
    slide()用来实例化轮播组件
    slide()中的参数可以考虑有以下几点:
    slidesScroll:每次滑过几张图片
    slidesShow:每次在可见区域中展现几张图片
    speed:滑动效果的速度
    autoplay:是否自动播放
    autoplaySpeed:自动播放的速度

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

demo
code

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

demo
code

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

推荐阅读更多精彩内容