UI设计：如何在Axure中，用动态面板实现banner的轮播效果

　　axure功能太强大了，动态面板让我头晕@_@眼花缭乱，更别说7.0版的中继器了。。。

　　不要胡说八道。让我们与您分享动态面板实现横幅旋转的效果。我不熟悉动态面板。像我这样的axure初学者不妨看看这种效果的制作过程，然后尝试这样做，这肯定会增加他们的信心。

　　以淘宝首页banner的轮播效果为例:

　　前期线稿图，零件准备

1. 先画一个大概的位置线框图，如下图所示，做了三个banner的轮播效果

　　2.banner位置的占位符转换为动态面板(鼠标右键，转换动态面板)，并命名面板→_→这不是强制性的。在右侧面板区找到动态面板(图为主页banner)，选择并添加两个状态，分别放banner2和banner3。

双击状态名进入相应的面板页面，您将看到一个蓝色的框架，框架中的部分将显示在面板中，框架外的部分将不显示。您可以修改状态名称(选择状态，然后单击名称，图中的状态名称修改为1、2、3对应的第一个横幅)

3.添加banner旋转时，banner上的状态按钮(图中的圆点会随banner切换，颜色会变化)，添加矩形部件，右键选择形状，然后选择椭圆，然后在工具栏中修改椭圆的宽度和高度，变成圆形。(w：10，h：10)，将零件复制两次，在右边零件的名称和注释处分别给三个点命名为点1、2、3

　　前期准备差不多，现在动态效果准备已经开始了

　　1. 准备工作几乎完成了，现在动态搭配效果开始了。首先，bannner应该设置为自动轮播。这是肿胀还是设置?首先给面板增加动态效果:选择面板，在右侧交互栏的“显示”项下添加用例，在杂项中等待2秒(用于显示横幅，自行设置时间长短)，然后在动态面板下选择“设置面板状态”，选择状态“下一步”重复“等待”，"设置面板状态"两次。

注:当banner转播到第三张时，下一张将连接到第一张banner。设置面板时，检查“从最后一个到第一个自动跳转”，以实现banner1、2、3、1、2、3的旋转顺序。

2. 做到这一点，在浏览器中预览，发现banner为什么不移动?别担心，要让banner移动，必须有触发条件。首先，将bannner动态面板设置为不可见(选择动态面板右键并设置为不可见)，然后在“页面交互”中设置。当页面载入时，添加用例以显示动态面板

　　3. 在这里，你可以再试一次预览，惊讶地发现横幅可以旋转，不是很开放吗?然后。停下来?这是什么鬼魂????告诉你，在完成之前，页面加载只触发了第一轮广播，重复需要再次触发，或肿胀或再次触发???嗯，简单，动态面板隐藏再次显示再次触发，木头非常神奇，哇哈哈。..

在动态面板显示“一项用例中最后添加隐藏面板，显示面板，保存后预览可以轮播

　　4. banner终于可以轮播了，开森!But，banner上的状态圆点还是木有变，都是一样的状态，现在来修改这三个圆点，让三个圆点对应各自的banner。

在三个圆点中添加交互式(选择圆点，右键添加交互式)"选中"下面设置圆点样式，选择填充颜色(红色，自行设置)，同样设置三个圆点。

　　5. 然后将圆点的效果与动态面板连接起来，继续在动态面板“显示”项的用例中添加内容，并在组件中选择“设置选择/选择”。当baner1显示时，选择圆点1(选择状态值:true)，圆点2和3为未选状态(选定状态值:false)，以此类推设置即可。

注意:用例是一个一个执行，不要把圆点的状态放错位置~圆点的状态要和相应的banner一致~

　　6. 所有完成后，预览原型，wow，完成了轮播效果~~~~~~~~~~~