美文网首页
进阶-任务17

进阶-任务17

作者: nicole914 | 来源:发表于2017-04-12 01:43 被阅读0次

    题目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

    相关文章

      网友评论

          本文标题:进阶-任务17

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