题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())
-
横向轮播(题目2):
- 布局:让父容器相对定位,设定宽高为一个图片的宽高,并且overflow:hidden(超出部分不显示);在父容器中设置一个图片容器,高度为图片高,宽度为图片宽*图片个数;在底部设置小圆点,绝对定位居于父容器底部;(横向轮播图组件react代码, 横向轮播图scss代码)
- 逻辑:一开始将尾图片和首图片clone后,分别放在首尾;增加图片容器的宽度;封装向前/向后翻页的方法(包含动画,动画锁,变化小圆点状态);最后为按钮添加事件(逻辑处理代码)
- 全局变量:curPage(当前第几张图片)和isAnimate(动画加锁)
- 封装函数:play(n):封装向后n页(n可以是负数),playNext:向后,playPre:向前。
-
淡入淡出、自动轮播图(题目3)
逻辑:与横向轮播类似,不需要clone首尾图片、重设宽度,但要设置定时器循环翻页(逻辑处理代码)
全局变量和封装函数:与横向轮播类似,方法play(n)