Axure的使用之轮播图

1.新建空白页面。

2.在元件库选择“动态面板”拖拽到页面中并命名。

图1

3.双击动态面板出现如下对话框，点击“加”号---点击“确定”，新建state(以四张图为例)。

图2

4.在如下区域双击对应的state，进入新的state页面，依次为每个state添加内容（若没有显示以下区域可点击菜单栏“视图”-“重置视图”）

图3

5.在新打开的state界面选择元件库的“图片”拖拽到页面中，双击图片插入合适的图片，调整图片大小与state一样大（超出state框的部分则会被隐藏）

图4

6.重复上述操作直到为每个state都插入内容。

图5

7.双击右边的Index以回到主页面。

图6

8.在元件库中选择两个左右箭头拖拽放到合适的位置。并同时选中动态面板和左右箭头，按鼠标右键，在弹出框中选择“组合”。

图7

9.选中两个箭头，点击“隐藏”。

图8

10.给整个组合添加上鼠标移入左右箭头显示的事件，点击确定。

图9

11.同上添加鼠标移出左右箭头隐藏的事件。

图10

12.给页面加上如下条件的页面载入事件。

图11

13.选中组合，双击鼠标移入时的case1下面的动作，将面板状态设为“停止循环”。

图12

14.选中组合，双击鼠标移出时的case1下面的动作，将面板状态设为“next”--“向后循环”。

图13

15.选中右箭头，加上如下鼠标单击事件。

图14

16.选中左箭头，加上如下鼠标单击事件。

图15

17.打开预览，轮播图就已经做好啦！