Axure教程-Banner图片轮播(一)

效果展示

Axure

元件:动态面板

定义:根据动作的变化,改变显示状态。即交互动作,触发面板的变化,例如,页面载入时、鼠标点击时、拖动时等。本文通过页面载入时Banner图片自动轮播来介绍动态面板的使用。

准备:三张一样大小的图片

步骤:

1,在“元件库”中拖动“动态面板”至页面中,根据轮播图片的大小设置动态面板的W和H值(本例为620*300);

Axure教程-Banner图片轮播(一)

2,双击动态面板,打开“面板状态管理”对话框;

Axure教程-Banner图片轮播(一)

3,输入“动态面板名称”为“轮播”,点击“+”添加面板状态,本次轮播图片为三张,所以需要再添加两个;

Axure教程-Banner图片轮播(一)

4,双击“State1”,打开state1界面;

Axure教程-Banner图片轮播(一)

5,在state1界面里,拖入图片元件;

Axure教程-Banner图片轮播(一)

6,双击图片元件,浏览轮播图片;

Axure教程-Banner图片轮播(一)
调整图片大小与轮播框一致;关闭当前State1页面;

7,重复步骤4-6,选择state2和state3状态,分别放入其他轮播图片。

Axure教程-Banner图片轮播(一)

8,添加动画,页面载入时幻灯片轮播,点击页面空白处,点击“页面载入时”

Axure教程-Banner图片轮播(一)

9,选择“设置面板状态”,按照下面进行设置;

Axure教程-Banner图片轮播(一)

10,点击“预览”。

Axure教程-Banner图片轮播(一)
Axure源文件下载地址:
链接:https://pan.baidu.com/s/1bDm8IgZpHKcFE_RLMNkR0Q
提取码:augh
复制这段内容后打开百度网盘手机App,操作更方便哦