前言
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设为下一项，勾选向后循环和循环间隔x毫秒，设为3000，取消勾选首个状态延时x毫秒后切换
这里的交互是指，点击指示器矩形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案例，本专栏每篇教程都会提供RP格式课件下载。
课件整包材料：
https://item.taobao.com/item.htm?id=631599964711
（@默林如斯原创出品，未经许可，禁止转载，侵权必究）
转自《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！查看全部教程 >>
网友评论