[新手教程]Axure RP 8实现图片自动轮播

阅读更多

最近在做一个新项目的原型，需要实现轮播图需求，在网上查找了很多教程，博主似乎都默认了有些步骤读者可以独自完成，没有找到可以提供给对Axure RP使用不熟悉的小白的新手教程。于是在此记录下我的学习过程和操作方法。

1.建立面板，命名为Banner，在动态面板上右键选择“管理面板状态”：

 

2.添加状态：

 

3.选中每个状态，进入每个状态的编辑页面：

4.在State1面板中拖入图片控件并选择本地图片：

至此，每个状态的页面编辑完成（至于每个图片底部的小圆点，与轮播图制作相同，在另一个动态面板中添加与，还有一个比较偷懒的方法就是在状态编辑画布中加入与图片数量相同的小圆点控件并置于顶层，在State1中设置第一个小圆点变色，在State2中设置第二个小圆点变色…）。

下面开始为动态面板添加交互。

5.在“检视：动态面板”下“属性”中交互板块点击“更多事件>>>”，

 

6.选择“鼠标移入时”，设置“目的地”的状态为“停止循环”。

 

7.继续添加事件：鼠标移出时，页面继续轮播循环，定义循环的时间为2000ms（2s）。

 

8.为页面添加交互（同鼠标移出时的交互一样）：续添加事件页面载入时。

 

至此，一个简单的轮播图效果就做好了。当然，要具体应用还需要添加图片底部的小圆点、左右图片切换箭头、图片载入效果（淡入淡出）等等。

• 
• 大小: 68.4 KB

• 
• 大小: 9.3 KB

• 
• 大小: 8.8 KB

• 
• 大小: 118.3 KB

• 
• 大小: 12.7 KB

• 
• 大小: 48.6 KB

• 
• 大小: 54.3 KB

• 
• 大小: 51.9 KB

• 查看图片附件