Axure RP9 轮播图效果实现

添加元件

动态面板

1. 拖动元件动态面板到页面，调整位置与大小
   

2. 双击动态面板，出现元件设置页面
   

3. 添加状态，放置图片元件并调整元件位置与大小
   

4. 双击图片元件，添加图片
   

5. 复制状态，更换图片
   

注意：【为什么进行复制操作而不是新建？】复制会保留状态中的图片元件以及图片元件的尺寸和内容，相似度高的状态可使用复制，只需替换图片即可

添加圆形元件

1. 添加元件、设置元件名称以及选中效果
   

2. 设置元件圆1被选中时，动态面板状态为图1
   

3. 复制圆形，更改元件名称以及对应轮播图效果
   

4. 设置圆形选项组（圆形选中效果互斥）

设置选项组方法：鼠标框选元件——>右键——>选项组——>给选项组起名

添加箭头

更换元件库为lcons，进行快速搜索

添加左右两个箭头，并调整位置和大小

设置交互事件

设置轮播图面板状态与圆形选中对应

1. 选中轮播图面板，添加交互事件
   

2. 添加事件为 状态改变时，添加动作为 选中圆1
   

3. 启用情形，添加条件为 轮播图面板==图1
   

4. 继续添加交互（也可以在侧边栏加）
   

设置页面载入时轮播

1. 点击页面空白处——>添加交互——>添加事件——>添加动作
   
   动作设置详情：
   
2. 设置关联选中圆1
   

设置轮播同时圆球交互（鼠标移出面板继续轮播）

给圆1添加鼠标移出交互

重复添加

设置箭头点击切换以及箭头移开继续循环

注意：右箭头设置向下一个循环，左箭头设置向上一个循环

在设置点击切换轮播图效果时，要勾选向后/前循环。否则箭头只能控制轮播图单层循环（不能之间在第一张和最后一张直接切换）

完成！

案例预览

主要参考

黑马程序员产品经理基础课程-4天Axure入门到精通-产品原型设计day3-07轮播图案例讲解
黑马程序员产品经理基础课程-4天Axure入门到精通-产品原型设计day3-08轮播图案例制作