轮播图

2017-05-27 本文已影响0人 Rising_suns

1.轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

横向轮播：
布局：让父容器相对定位，设定宽高为一个图片的宽高，并且overflow:hidden（超出部分不显示）；在父容器中设置一个图片容器，高度为图片高，宽度为图片宽*图片个数；在底部设置小圆点，绝对定位居于父容器底部；
逻辑：一开始将尾图片和首图片clone后，分别放在首尾；增加图片容器的宽度；封装向前/向后翻页的方法（包含动画，动画锁，变化小圆点状态）；最后为按钮添加事件（逻辑处理代码）
全局变量：curPage（当前第几张图片）和isAnimate（动画加锁）
封装函数：play(n):封装向后n页（n可以是负数），playNext:向后，playPre:向前。
淡入淡出、自动轮播图
布局：类似与横向轮播。但是图片是绝对布局，可以互相覆盖。一开始只有第一张图片是显示，其他隐藏。
逻辑：与横向轮播类似，不需要clone首尾图片、重设宽度，但要设置定时器循环翻页
全局变量和封装函数：与横向轮播类似，方法play(n)