不管是在PC端还是移动端，轮播图是常见的设计元素。下面详细讲解轮播图的制作步骤。

作为Axure初学者，把最近学到的记录下来，和大家一起学习。

如何实现轮播图：

循环展示轮播图片； 将圆点与轮播图一一对应； 实现前一张、后一张切换。

1、所需元件

首先我们需要准备以下元件：

动态面板（1000*400）、圆（3个，15*15）、向左、向右按钮图片（50*50）。

2、填充动态面板

①在动态面板中，填充内容，每个状态添加一个图片，这就是在轮播时展示的图片。

将动态面板命名为轮播图面板，并在动态面板中添加3个状态，分别命名为轮播图1、轮播图2、轮播图3

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

3、添加事件

（1）循环展示图片

设置在载入时进行自动轮播动作。

点击轮播图面板，在属性中双击载入时。

在元件中选择设置面板状态，在右侧配置动作中，选择轮播图面板，选择状态NEXT，配置如下图。点击确定。

（2）轮播图与选项圆点对应

①将圆点设置成选项组。（选项组作用：同一个选项组的元件，当其中一个部件被选中时，系统会自动取消选择其他部件。）

同时选中三个圆（圆从左至右分别命名为1、2、3），鼠标右键，点击设置选项组，给选选项组命名后，点击确定。

②设置面板状态与圆点的对应关系。

面板状态为轮播图1时，对应圆点1；面板状态为轮播图2时，对应圆点2；面板状态为轮播图3时，对应圆点3。

点击轮播面板，在属性中双击状态改变时，添加条件，点击确定。条件状态设置如下：

添加选中动作，选择椭圆1，点击确定。

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

点击椭圆1，双击鼠标点击事件，设置面板状态，选择轮播图1，选择动画方式。如下图：

④点击圆点出现对应图片后，需要循环展示图片，所以还需加上以下步骤。

点击设置面板，选择NEXT状态,设置循环效果，

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

（3）上一张下一张操作

①点击向左按钮时，展示前一张图片。如果当前图片为第一张轮播图，则点击向左，出现第三张轮播图。

选中向左元件，添加鼠标单击时，添加条件，

设置面板状态，选择状态轮播图3，设置动画状态，

循环设置：再次点击设置面板状态，选择状态NEXT，设置循环，点击确定。如下图：

②如果当前轮播图不是第一张图片，则显示前一张图片。

选择向左元件，鼠标单击事件添加用例，添加条件，面板状态不等于轮播图1时，

设置面板状态，勾选轮播图面板，选择Previous状态，设置动画。

③点击向右按钮，出现下一张图片。如果当前图片为第三张轮播图，点击下一张，出现第一张图片。

选中向右元件，添加鼠标单击时，添加条件，如下：

设置面板状态，选择状态轮播图1，设置动画状态，

④如果当前图片不是第三张轮播图，点击向右按钮，出现下一张图片。

选择向右元件，鼠标单击事件添加用例，添加条件，面板状态不等于轮播图3时，如下图

设置面板状态，勾选轮播图面板，选择NEXT状态，设置动画，如下图：

通过以上步骤，就可以在Axure中完成轮播图的制作啦。点击预览，即可看到轮播图的效果了~

后续笔者会更新一系列Axure制作步骤详解。