Axure 9 实现轮播图

轮播图实现

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

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

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

之后点击工作区域正上方的state1，点击添加状态

双击面板中的状态，在每个状态中添加一张图片。

3、添加事件（1）循环展示图片
点击轮播图面板，在“交互”中点击“New Interaction”，之后点击【载入 时】。
在元件中选择【设置面板状态】，在右侧配置动作中，选择【轮播图面板】，选择状态【NEXT】，配置如下图。点击确定。

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

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

之后点击（已选择的交互）【状态改变时】的右边Enable Cases（如图，鼠标移动过去后自动显示该按钮）

条件状态设置如下：
（因为我轮播图未进行命名，所以第二个框就是（动态面板））

点击确定后点击【Case1下的紫色加号】，点击设置选中。

点击【设置选中】后点击相对应的椭圆1.

重复以上操作两次，条件为面板状态轮播图2时，选中椭圆2；条件为面板状态轮播图3时，选中椭圆3。如下图：

③点击圆点时展示对应图片，以及图片进入、退出方式的设置。点击椭圆1，点击【鼠标点击事件】，【设置面板状态】，选择【轮播图1】，选择动画方式。

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

对椭圆2、椭圆3进行同样的动作设置（椭圆2选择状态为轮播图2，椭圆3选择状态为轮播图3。）：