上一篇网址：Axure rp9轮播图制作教程

上一篇讲到了轮播图制作教程的前面一部分，今天我们来讲剩下的一部分，先来个首页轮播图展示，如图：

然后我们结合一下上一篇的知识，我已经把上一篇文章的跳转链接放在这一篇的最上方了，我们接着讲轮播。

轮播图底部会有几个小圆点，有几张图就有几个，这几个小圆点叫分页器我们先来说一下分页器的制作步骤。

步骤一：创建动态面板，添加小圆组合

把上一篇的轮播的动态面板、元件等组合每个都分别命名，方便查看，也方便等下的逻辑引用。

然后选中轮播，右键选择创建动态面板，因为轮播的小圆点也是属于动画效果，所以也要用到动态面板，所以外面要再设置一个动态面板，设置好后如下图所示：

然后再添加四个小圆在矩形下面，然后右键点击组合，注意大纲一定要看到，小圆一定要在State状态模块下，否则小圆不会出现轮播效果。

步骤二：选中四个小圆的组合、设置选中样式和单个小圆样式

（1）点击新建交互，下拉选择选定选项。

（2）然后点击最下面一行小字，Select Properties，在指定选项组处命名小圆组合，当然，这个命名是看个人的，点击空白处收起。

（3）再回到选定这里，点击+更多样式属性，样式设置填充颜色白色点击确定，样式看个人。

（4）上面说的是整个组合的选定样式，小圆自己也是要设置样式的，所以我们要点击每一个小圆，分别给它们设一个比上面白色黑一点的颜色，我这里设置的色号是#cccccc。

（5）之后我们要选中第一个小圆，也就是刚刚命名的圆点-1，右键选择选中的那个选项，记住这是第一个小圆才要设置，因为按照逻辑上走，网页预览默认选中第一个小圆是要和其他小圆颜色区别开来的。

步骤三：给每个圆点分别设置交互动画效果

分别选中圆点，例如选中圆点-1，如图所示，设置鼠标单击效果和设置面板状态，每个圆点都要，四个圆点对应轮播1、2、3、4。

步骤四：设置轮播图动态面板的交互逻辑

可以说这是最重要的一步了，我们选中轮播图模块然后点击右边的新建交互，找到选项动态面板状态改变时。

之后不用添加任何事件动作，我们单纯设置逻辑用例，在动态面板状态改变时旁边有一个按钮启用用例，点击它。

之后跳出来的页面如下图，我们点击添加逻辑按钮。

点击之后它会跳出已经默认输入的逻辑事件IF事件，然后点击确定。

回到交互面板，我们在Case1下面找到一个+号，点击它，跳出动作事件选项，找到选项设置选择/选中并点击。

接下来设置目标元件圆点-1，意思是，第一个矩形出现时圆点-1相应改变。

还没完，我们还要设置当轮播图是2、3、4的时候让圆点-2、圆点-3、圆点-4改变，所以要再点击新增用例按钮。还是Case1，只不过这次我们要设置的不是IF事件而是ELSE IF事件，不过这些事件都不用我们点击就会跳出来，而是本来就默认的，因为前面已经有一个Case1了，而且出现的是IF事件，所以后面添加的Case1都会出现的是ELSE IF事件。

然后和上面一样，也是在事件下点击+号，也是找到选项设置选择/选中，

剩下两个Case1都是ELSE IF事件，步骤都一样。

轮播图讲到这就完成了，大家可以自己试试效果。

上一篇Axure rp9轮播图制作教程

如果还有不懂的，我重新把上一篇放出来了，祝大家工作愉快！