Axure轮播图超简单制作方式（适合初学）

Axure RP这款软件的强大众所周知，笔者也处于探索期间。

特意将自己学习的过程记录下来，以便巩固。如果有初学者需要更是利己利人。

下面直接进入主题。

1.分析

分析需要轮播的图片数量，这里拿3张轮播图片来举例。分析完毕后来到“线框图”中找到“动态面板”选项，拖动动态面板到编辑区，并设置好动态面板的尺寸大小，和轮播的图片一致。

部件

2.双击你拖出的动态面板，进入“动态面板状态管理”页面，点击“＋”添加子集，子集的数量和你需要轮播的数量一致（这里需要提到的是，在新建动态面板和添加子集的时候最好为它们命名，这样方便后期的管理和编辑，这点真的很重要）

动态面板状态管理

3.放入图片，在右下角“部件管理”中，双击你添加的子集，将图片放入子集对应的面板框中。（如果你添加了图片发现下面没显示，那么检查一下Widget Filter这个选项下是不是选的“所有部件”）

部件管理

4.回到首页界面，你会发现你添加的图片的第一张已经显示在动态面板中了。然后选中动态面板，在右侧“部件交互和注释”中双击“载入时”用例进入用例编辑器

部件交互和注释

5.在用例编辑器中先选择“杂项”-“等待”输入等待毫秒数，这里用系统默认的1000毫秒。这么做的原因是防止轮播图在载入时就开始轮播，而导致第一张图片的显示效果不好，造成的用户体验不佳。然后选择“动态面板”选项下的“设置动态面板”选项，在“配置动作”中勾选刚刚我们设置的轮播图动态面板，选择状态选择“下一步”，勾选上“从最后一个到第一个自动跳转”实现无限轮播效果，勾选上“repeat every”并设定数值，这个选项设定的数值就是一张图片到下一张图片之间的等待时间。为了让过渡更加平滑，所以进入、退出动画都选择向左滑动，这个根据自己的需求决定。设置完毕后点击确定退出用例编辑器。另外需要提到的一点就是用例执行的顺序是由上到下的，所以“等待”用例需要在第一位才可以。

用例编辑器

6.此时可以按F5预览一下效果，可以发现图片已经可以开始轮播了，但是还是缺少一部分东西。因为我们在网页中看到的轮播图效果，下面对应的点。这个轮播图圆点的制作方式完全和我们上面制作的过程一样，用例的添加也是一样的。

动态面板

这里我是之间选择“线框图”中的矩形，换成了爱心。并填充了颜色以对应轮播的图片

部件管理

这里的轮播图圆点的动态面板的用例我将动画修改为了“淡入淡出”，当然用向右滑动也是可以的，看个人需求

部件交互和注释

7.这个简单的轮播效果到这里就完成了，希望对初学者有所帮助。如果有人喜欢的话，我以后会多发些简单的教程上来，新开，希望和大家多多交流。