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 <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 轮播面板处理自动轮播的动效
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容