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