横幅旋转图是原型图中最常见的模块之一。只要是互联网产品，基本都用轮播图。

上一篇文章解释了如何使用master实现网址导航的切换。本教程教你:如何使用Axure动态面板实现互联网产品banner carousel的交互。

横幅轮播的交互通过动态面板实现。大家都把动态面板当成电视机。每个横幅图片就像一个频道，遥控器上的按钮连接到每个频道。

换句话说，动态面板是一个横幅图片的盒子。像下图:黑色的盒子就是动态面板的盒子，里面不同颜色的长方形就是内容，每次都按照指令显示。

这次还是用一个现实生活中的案例来举例:购物网站淘宝首页的横幅轮播图(这里选取四张轮播图进行说明)。

首先准备好四份横幅材料:

下面我们正式进入实施步骤:

拖入动态面板组件->根据素材大小调整动态面板大小:在样式中，修改长度为520，宽度为280，命名为“banner”->:

双击横幅动态面板进入编辑页面-& gt；点击“添加状态”，添加四种状态，分别命名为“banner01”、“banner02”、“banner03”、“banner 04”->:

分别点击banner01、02、03、04图层，将四张横幅图片分别粘贴到四个面板图层->:

1.底部按钮

拖入矩形元素-->:在样式中，大小改为:长58，宽14-->:填充颜色改为白色填充，不透明度为24%-->:输入较大的圆角半径值，形成两端带圆角的矩形条带-->:

拖入圆形元素->:在样式中，将大小更改为8，将线宽更改为0，并删除笔画->:将圆形复制为4，并将其排列在圆角矩形条的中间->:

2.侧面按钮

拖入矩形元素->:样式大小改为:长度大于宽度(如50)，宽度为30->；输入较大的圆角半径值，形成两端带圆角的矩形条带-->填充颜色改为黑色填充，不透明度为32%-->:

再次拖动矩形元素->:将其放置在圆角矩形的适当位置->；在框中选择两个矩形，点击样式中的“移除”按钮，剪切圆角矩形得到淘宝案例中的按钮形状-->:

然后把箭头图标和鼠标右键组成一组两个图->:命名为"右"->；

复制“右”形组合-->右键分别选择形状，选择“变换形状”->:选择“水平翻转”->；名叫“左”->；

按钮的样式如下完成:

1.底部选择按钮交互

点击第一轮按钮-& gt；在交互栏中点击“新建交互”->:用鼠标选择“点击时”->:动作选择“设置面板状态”->:选择横幅动态面板-& gt；选择“banner 01”-->；"完成"->；

点击“添加动作”->:动作选择“设置选定项”->:选择“当前组件”作为目标->:值为“真”->:“确定”->；

点击第一轮按钮的交互，复制粘贴到第二、三、四轮按钮上-->分别修改“设置面板状态”交互，对应对应的横幅图片-->:

点击交互栏:+添加一个类似“鼠标悬停”的交互样式-& gt；选择“组件选定样式”->:单击“填充颜色”->:将颜色改为橙色->；"完成"->；

点击“全部显示”-->；名为“circle _ icon”的组-->

选择组件的选中样式，分别复制粘贴到其他圆形按钮上，选择“circle _ icon”为选项组->

2.侧面按钮交互

点击“右键”组合按钮，点击“新建交互”->:用鼠标选择“点击时”->:动作选择“设置面板状态”->:选择横幅动态面板-& gt；选择“下一步”，点击“向后循环”->:选择“向左滑动”进入动画，退出动画200 ms-->“确定”->；

将“右”交互复制粘贴到“左”按钮上-->:将交互内容改为“上一个”，勾选“正向循环”，进入动画并启动动画，选择“向右滑动”->:

3.页面加载期间的交互

当我们打开淘宝网页时，发现banner广告图的默认圆形按钮选择了第一张广告图，这是页面加载时需要选择的:

点击axure内容区的空空格(也就是不要点击任何组件、图片等。)-& gt；点击“新互动”-->；选择“页面加载时”->:动作选择“设置选择”->:选择目标的第一个圆->；值为" true "->:" OK "->；

至此，banner carousel地图的基本交互功能已经完成:

有了基本的交互功能，发现还是有些不足，用户体验不是很好。我们需要进一步改善互动。比如切换图片时底部按钮要向左或向右移动。点击侧边按钮切换图片时，底部按钮需要相应设置选中状态，以此类推。当产品经理考虑用户体验时，需要仔细考虑这些交互。

因为时间关系，进一步完善教程(进阶章)。下一个继续解释。