前言

Hello！欢迎来到Axure 9 实战案例教程专栏。

动态面板在Axure原型设计中，可以说是应用最广泛的；本次课程我们继续来学习一下，动态面板的应用；本篇我们来讲解一下，如何运用动态面板绘制首页自动轮播广告。

自动轮播广告效果图

我们先来看看完成效果图，大家可以看到，首页自动轮播广告的交互主要包括：

①默认状态时，从第1~5个图片循环轮播；

②广告轮播时，指示器定位到对应圆点上；

③点击指示器圆点时，切换至对应图片，随后又继续自动向后轮播。

广告初稿

为了节省时间，这里提前把轮播广告初稿准备好了。下面来给大家讲解一下设置轮播广告交互的步骤。

第一步：绘制轮播广告动态面板

首先选中图片1，点击右键，选择转换为动态面板；再在左侧栏的概要中，在State1上点击右键，选择添加状态，给动态面板添加多2个状态；然后将图片2拖入State2，图片3拖入State3，并将元件对齐动态面板边界。

在图片1上点击右键，选择转换为动态面板

在概要的State1上点击右键，选择添加状态，添加多2个状态

将图片2拖入State2，图片3拖入State3，并将元件对齐动态面板边界

接着回到正常画布，将指示器拖到动态面板的右下角；然后选中指示器，在右侧栏的交互中，点击<添加类似"鼠标悬停"的交互样式>，再选择元件选中的样式，设置填充颜色。

将指示器拖到动态面板右下角

选中指示器，在右侧栏交互中，点击<添加类似"鼠标悬停"的交互样式>

选择元件选中的样式

设置填充颜色

第二步：设置广告自动轮播交互

首先选中动态面板，在右侧栏的交互中，依次点击新建交互-载入时-设置选中-矩形1，默认为真；然后点击添加动作-设置面板状态-当前元件，设置State菜单为下一项，勾选向后循环，再勾选循环间隔xxxx毫秒（默认勾选首个状态延时xxxx毫秒后切换），并设置为3000毫秒。

选中动态面板，依次点击新建交互-载入时-设置选中-指示器矩形1

点击添加动作-设置面板状态-当前元件，设置State为下一项，勾选向后循环和循环间隔x毫秒，设置为3000毫秒

这里的交互是指，动态面板载入时，选中指示器的矩形1，首次延时3000毫秒后，当前元件（动态面板）开始自动向后循环轮播，循环间隔为3000毫秒。（PS：为了美观，我们还可以设置进入动画和退出动画。）

第二步动态面板的交互

第三步：设置指示器的选中交互

首先继续选中动态面板，在右侧栏的交互中，依次点击新建交互-状态改变时-设置选中-指示器矩形1，到达默认为真；然后点击添加目标-指示器矩形2，到达设置为假；再点击添加目标-指示器矩形3，到达设置为假。

继续选中动态面板，点击新建交互-状态改变时-设置选中-指示器矩形1

点击添加目标-指示器矩形2，设为假；再点击添加目标-指示器矩形3，设为假

接着点击状态改变时的启用情形，打开情形编辑窗，在弹窗中点击添加条件，保持默认条件直接点击确定。

点击启用情形，打开情形编辑窗

在情形编辑窗中点击添加条件，保持默认条件直接点击确定

这里的交互是指，当动态面板状态为State1时，选中指示器矩形1（取消选中矩形2和3为）；依照此方法，我们还可以设置指示器矩形2和3的选中交互。

因此我们可以将情形1的交互复制过来，复用其情形条件和交互。首先选中状态改变时的情形1，按Ctrl+C（复制其交互到剪贴板），再按2次Ctrl+V（粘贴多2个情形）。

选中情形1，复制粘贴多2个情形

接着修改第2个情形的名称为情形2，情形条件的最后一个下拉菜单为State2；然后修改设置选中交互的指示器矩形1为假，矩形2为真，矩形3为假。

按上图修改第2个情形的交互

再接着修改第3个情形的名称为情形3，情形条件的最后一个下拉菜单为State3；然后修改设置选中交互的指示器矩形1为假，矩形2为假，矩形3为真。

按上图修改第3个情形的交互

第三步动态面板的交互

第四步：设置指示器的点击交互

首先选中指示器矩形1，在右侧栏交互中，依次点击新建交互-单击时-设置面板状态-动态面板，State菜单默认为State1；再点击添加动作-设置选中-指示器矩形1，到达菜单默认为真；然后点击添加目标-指示器矩形2，到达设置为假；再点击添加目标-指示器矩形3，到达设置为假。

选中指示器矩形1，点击新建交互-单击时-设置面板状态-动态面板

点击添加动作-设置选中-指示器矩形1

点击添加目标-指示器矩形2，到达设为假；再点击添加目标-指示器矩形3，到达设为假

接着继续选中指示器矩形1，点击添加动作-等待，设置等待时间为3000毫秒；然后再点击添加动作，依次点击设置面板状态-动态面板，State菜单设为下一项，勾选向后循环和循环间隔xxxx毫秒，设置为3000毫秒，取消勾选首个状态延时xxxx毫秒后切换。（PS：同样为了美观，我们还可以设置进入动画和退出动画。）

点击添加动作-等待，设置为3000毫秒

点击添加动作-设置面板状态-动态面板，State为下一项，勾选向后循环和循环间隔，设3000，不勾选首个状态…

这里的交互是指，点击指示器矩形1时，设置动态面板状态为State1，并选中矩形1（取消选中矩形2和3为），等待3000毫秒后，继续自动向后轮播。依照此方法，我们还可以设置指示器矩形2和3的点击交互。

因此我们可以将指示器矩形1的交互复制过来，复用其交互。首先单击时交互，按Ctrl+C（复制其交互到剪贴板），再依次选中矩形2和3，按Ctrl+V（粘贴矩形1的交互到矩形2和3）。

将指示器矩形1的交互，复制粘贴到矩形2和3

接着修改指示器矩形2的交互，设置面板状态为State2，设置选中指示器矩形2为真，矩形1和3为假；修改指示器矩形3的交互，设置面板状态为State3，设置选中指示器矩形3为具，矩形1和2为假。

修改指示器矩形2为State2，设置选中矩形2为真，1和3为假；修改矩形3为State3，设置选中矩形3为真，1和2为假

第四步指示器的交互

结语

OK了，通过前面4个步骤，一个官网首页自动轮播广告就绘制完成了。以上就是本次课程的全部内容，你学会了吗？如果有不理解的地方，可以下载文末的课件继续学习哦。

（@默林如斯原创出品，未经许可，禁止转载，侵权必究）

转自《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！适合Axure入门的同学！