美文网首页axure使用技巧
axure 8 绘制带有点的轮播图

axure 8 绘制带有点的轮播图

作者: 楠芯木 | 来源:发表于2016-09-22 23:51 被阅读829次

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

相关文章