题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())
原理:
- 将所有要展示的图片水平排列,形成一个轨道
- 为其父容器设置固定的宽高用以展示图片,并设置
overflow:hidden
属性隐藏溢出部分 - 当需要展示某张图片时,移动轨道,将该图片移动到可见区域
- 在轨道头部增加一份最后一张图片的克隆,在轨道尾部增加一份第一张图片的克隆,当这两份克隆图片展示时,将它们对应当本体图片切换到可视区域,即可实现同一方向上当无限轮播
需要抽象出的函数:play()
向这个函数中传递一个索引值,即可控制轮播图片的展示,无论是上一张按钮、下一张按钮、用于跳转到特定图片的nav-tab
,只要传递正确的索引值,都可以使用这个函数达到效果。题目2的demo·改及题目3的demo�就用此方法实现