Axure怎么使用动态面板制作banner图片轮播?

Axure使用动态面板制作banner图片轮播的方法

1. 基本设置与图片准备
   • 首先打开Axure软件，在基本元件中选择“动态面板”，可以根据需求对动态面板命名（如“banner轮播”）并设置其大小（例如宽为1200，高为450等，大小可自行设定）。
   • 从网上下载一些免费的图片，将它们的大小设置为统一数值，以便作为轮播素材，然后把素材载入到Axure之中。
2. 动态面板状态设置
   • 双击打开动态面板，弹出动态面板属性框。根据轮播图片的数量设置相应的层数或状态，例如制作三个图片轮播，就设置三个状态，可以对每个状态进行重命名以便区分（如命名为图1、图2、图3等）。
   • 针对每个状态，将图片控件拖入状态面板中，调节控件大小后导入对应的图片。需要注意图片不能超出状态框（虚线）范围，否则可能显示不全，如果超出可拖动、裁剪或调整图片大小。
3. 设置轮播交互
   • 选中动态面板，在属性面板 - 交互 - 载入时进行设置。例如，在载入时用例编辑窗口中设置面板状态，选择相应的动态面板（如“banner轮播”），选择状态（如“NXET”等），勾选“向后循环”，循环间隔可选择3000毫秒，进入动画/退出动画可选择“向左滑动 - 时间1000毫秒”等（具体时间可根据需求调整）。
   • 也可以选择设置为当页面加载时，目标原件选择动态面板，状态选择下一个（或上一个）并勾选从一个到第一个自动循环，进入时动画选择向左滑动、设置好循环时间（如默认500毫秒，可自由设置），同时要在更多选项中勾选循环时间间隔并设置好数值，这样才能在页面加载时自动轮播。
4. 导航（小圆圈）相关设置（如有）
   • 将椭圆元件拖入页面制作导航小圆圈，按住ctrl键挨个点击各个圆圈将其选中后，右键选择样式效果，为其设置选中时的样式效果（如不同颜色代表选中与否）。
   • 实现动态面板的状态和小圆圈的选中联动，首先为动态面板新建交互，选择动态面板状态改变时，然后进行相关的原件选择等操作来完成关联，并且要设置默认选中第一个圈圈，为了实现小圈圈之间的互斥，可以将它们加入到一个选择组中。
5. 添加切换按钮（如有）
   • 按键（如向前和向后按键）可以通过Axure绘制，例如一个矩形加一个折线即可。绘制完成后设置其透明度并摆放到合适的位置上，然后将这两个按键隐藏，设置为当鼠标移入的时候显示，移出的时候隐藏。按键本身单击时设置触发效果（如直接触发next效果，向前按键同理），并且该条件需要同时设置于图片所在的动态面板以及按键本身。