Axure动态面板实现banner的轮播效果

一般我们在逛淘宝的时候，首页会有很多图片来回播放，那就是轮播图，如果我们想要实现这个效果难不难？当然不难，Axure（http://www.axurechina.cc/）就可以帮助你。Axure是一款强大的原型设计软件，而且不需要你懂编码你就可以制作高逼真的网页模型。

1. 首先绘制一个总位置线框图，如下图所示，使3个banner旋转效果

2.banner位置占位符转换为动态面板(鼠标右键,转换的动态面板),,在右边的面板区域找到动态面板(横幅在主页的图),选择、添加2个,分别banner2 banner3。

双击状态名进入相应的面板页面，您将看到一个蓝色框。盒子里面的零件会显示在面板上，盒子外面的零件不会显示。您可以更改州名(选择州名，然后单击州名进行修改，图中的州名更改为1,2,3，对应于哪个banner)

3.添加banner轮播时，banner上面的状态按钮（图中的圆点，会跟随banner切换，颜色变化），添加矩形部件，右键选择形状，然后选择椭圆，然后在工具栏里修改椭圆的宽和高，变成一个圆（w：10，h：10），复制部件2次，在右侧部件名称和注释处给3个圆点分别命名圆点1，2，3

1. 准备工作差不多完成了，现在开始动态搭配效果。首先是banner要设置成自动轮播的。这要肿么设置呢？先给面板加动态效果：选中面板，在右侧交互栏的“显示”一项下添加用例，杂项里选择等待2秒（用来展示banner，时间长短自行设置），然后在动态面板下选择”设置面板状态“，选择状态“下一步”，设置进入退出动画“向左滑动”，动作时间设置为500毫秒。重复“等待”，”设置面板状态”两次。

注意：banner轮播到第三张时，下一张连接第一张banner，在设置面板状态时，勾选”从最后一个到第一个自动跳转“，这样才能实现banner1，2，3，1，2，3这样的轮播顺序。

Axure添加交互

2. 做到这里，在浏览器里预览，要让banner动，得有个触发条件，首先将banner动态面板设置为不可见（选中动态面板右键，设为不可见），然后在”页面交互“中设置当页面载入是，添加用例，显示动态面板

3.banner上的状态圆点没有发生变化，都是一样的状态，现在来修改这3个圆点，让3个圆点对应各自的banner。给3个圆点添加交互样式（选中圆点，右键添加交互样式），在”选中”下设置圆点样式，选择填充个颜色（红色，自行设置），3个圆点同理设置。

5. 然后将圆点的效果和动态面板联系起来，在动态面板“显示”一项的用例里继续添加内容，部件里选择“设置选择/选中”，banner1显示时，选中圆点1（选定状态值：true），圆点2和3为未选中状态（选定状态值：false），以此类推设置即可。

注意：用例是一项一项执行，不要把圆点的状态放错位置哟~圆点状态要和对应的banner状态一致哦~

6. 全部制作完成，点击预览。

以上内容就是关于Axure动态面板实现banner的轮播效果，更多教程，可以关注Axure（http://www.axurechina.cc/）中文网。

本篇文章来源于：http://www.axurechina.cc/news/1499.html