一、轮播banner需求分析：
给3张图片编号，分别是1，2，3
1、每隔4s,播放顺序: 1，2，3，1，2，3...
第i张播放i+1,若i+1=n+1,则改为1；相当一直向左边滑动
同时对应的点为选中状态
2、1向左滑动展示2，向右滑动展示3；
2向左滑动展示3，向右滑动展示1；
3向左滑动展示1，向右滑动展示2；
展示哪张，哪张对应圆点为选中状态。
3、推断和总结：设一共有n张图，编号1，2，..., i, n;
1<i <n向左滑动展示i+1,向右滑动展示i-1;
i= 1向左滑动展示1+1,向右滑动展示n;
i= n向左滑动展示1,向右滑动展示n-1;
等价于：1<＝i <＝n 向左滑动展示i+1, 向右滑动展示i-1;
若i+1 = n+1则改为1；若i-1 = 0则改为n.
二、结构组成：动态面板（有三种状态，每种状态为一张图片，共三张）＋三点圆组合
其中，圆组合放在动态面板上。
图 1 轮播面板结构
图 2 圆组合的设置
三、交互事件
1 动态面板处理手动向左滑动，向右滑动的动效
图 3 轮播面板处理滑动动效
2 动态面板处理载入时自动轮播的动效
图 4 轮播面板处理自动轮播的动效
网友评论