轮播的实现

2017-11-06  本文已影响0人  魔王卡卡

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

原理:

  1. 将所有要展示的图片水平排列,形成一个轨道
  2. 为其父容器设置固定的宽高用以展示图片,并设置overflow:hidden属性隐藏溢出部分
  3. 当需要展示某张图片时,移动轨道,将该图片移动到可见区域
  4. 在轨道头部增加一份最后一张图片的克隆,在轨道尾部增加一份第一张图片的克隆,当这两份克隆图片展示时,将它们对应当本体图片切换到可视区域,即可实现同一方向上当无限轮播

需要抽象出的函数:play()
向这个函数中传递一个索引值,即可控制轮播图片的展示,无论是上一张按钮、下一张按钮、用于跳转到特定图片的nav-tab,只要传递正确的索引值,都可以使用这个函数达到效果。题目2的demo·改及题目3的demo�就用此方法实现


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

demo

demo·改


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

demo


上一篇下一篇

猜你喜欢

热点阅读