Axure 9 实现轮播图

Axure 9 实现轮播图

  • 轮播图实现

轮播图实现

#首先感谢https://www.jianshu.com/p/628a22c1f653这篇文章,
这篇文章是讲Axure8的轮播图实现,我根据这篇文章的指导以及自己对Axure9的使用摸索,写下此文。

1、所需元件
首先我们需要准备以下元件:动态面板(大小自己选)、圆(n个,有几张图及选几个,大小自己调)。在下面这个列表里。

Axure 9 实现轮播图_第1张图片

2、将动态面板拖入工作台,将其命名为“轮播图面板”,之后双击动态面板区域,点击右侧State1 下的FILL的“图片”,插入图片
Axure 9 实现轮播图_第2张图片

之后点击工作区域正上方的state1,点击添加状态
Axure 9 实现轮播图_第3张图片
双击面板中的状态,在每个状态中添加一张图片。

3、添加事件(1)循环展示图片
点击轮播图面板,在“交互”中点击“New Interaction”,之后点击【载入 时】。
在元件中选择【设置面板状态】,在右侧配置动作中,选择【轮播图面板】,选择状态【NEXT】,配置如下图。点击确定。
Axure 9 实现轮播图_第4张图片

(2)轮播图与选项圆点对应①将圆点设置成选项组。(选项组作用:同一个选项组的元件,当其中一个部件被选中时,系统会自动取消选择其他部件。)同时选中三个圆(圆从左至右分别命名为“1”、“2”、“3”),鼠标右键,点击【设置选项组】,给选选项组命名后,点击确定。

Axure 9 实现轮播图_第5张图片

②设置面板状态与圆点的对应关系。面板状态为轮播图1时,对应圆点1;面板状态为轮播图2时,对应圆点2;面板状态为轮播图3时,对应圆点3。
操作如下:点击轮播面板,在【交互】中单机击【状态改变时】,之后点击左侧空白区域。(注:这就是Axure 9 与8不同的地方,Axure 9的【添加条件】并不能在【状态改变时】下下拉框找到)

之后点击(已选择的交互)【状态改变时】的右边Enable Cases(如图,鼠标移动过去后自动显示该按钮)
Axure 9 实现轮播图_第6张图片

条件状态设置如下:
(因为我轮播图未进行命名,所以第二个框就是(动态面板))Axure 9 实现轮播图_第7张图片

点击确定后点击【Case1下的紫色加号】,点击设置选中。
Axure 9 实现轮播图_第8张图片
点击【设置选中】后点击相对应的椭圆1.

重复以上操作两次,条件为面板状态轮播图2时,选中椭圆2;条件为面板状态轮播图3时,选中椭圆3。如下图:
Axure 9 实现轮播图_第9张图片
③点击圆点时展示对应图片,以及图片进入、退出方式的设置。点击椭圆1,点击【鼠标点击事件】,【设置面板状态】,选择【轮播图1】,选择动画方式。

④点击圆点出现对应图片后,需要循环展示图片,所以还需加上以下步骤。点击【设置面板】,选择【NEXT】状态,设置循环效果
Axure 9 实现轮播图_第10张图片

对椭圆2、椭圆3进行同样的动作设置(椭圆2选择状态为轮播图2,椭圆3选择状态为轮播图3。):

你可能感兴趣的:(Axure9,其他,前端)