axure 8 绘制带有点的轮播图

一、轮播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= 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 轮播面板处理自动轮播的动效