手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Axure使用:原型中如何实现图片轮播效果

时间:2024-10-11 23:27:47

1、添加动态面板:找到动态面板并将其拖入到工作区域。根据自己的实际需求给动态面板设置合适的尺寸。

Axure使用:原型中如何实现图片轮播效果

2、为动态面板添加状态:(在此演示三张轮播图的操作,可根据实际情况添加图片数量)双击动态面板,添加三个状态。

Axure使用:原型中如何实现图片轮播效果

3、添加图片:双击动态面板后,双击状态名称进入状态编辑页。为该状态添加图片。

Axure使用:原型中如何实现图片轮播效果

4、添加图片的方法:方法一:直接将本地的图片复制进来。方法二:添加图片控件,双击图片控件,选择本地图片文件。

Axure使用:原型中如何实现图片轮播效果
Axure使用:原型中如何实现图片轮播效果

5、制作滚动按钮:选择原型工具。为其设置选中状态。因为制作了三个图片,再复制两个按钮出来。调整按钮的大小和位置,我这里设置的9*9。

Axure使用:原型中如何实现图片轮播效果
Axure使用:原型中如何实现图片轮播效果

6、制作图片载入效果:载入时——设置动态面板状态—缇吾怩舭—当前原件(如果改名字了,也可以选择动态面板的名字)——Ne旌忭檀挢xt状态——向后循环——间隔时间——首个状态延迟——进入动画、退出动画——确定。【注意】进入动画和退出动画可以根据自己的喜好选择效果,此处为默认的选项。

Axure使用:原型中如何实现图片轮播效果

7、关联轮播按钮:给轮播按钮命名1、2、3。为动态面板设置“状态改变时”条件,面板状态改变时对应的按钮被选中,设置过程见图片。

Axure使用:原型中如何实现图片轮播效果
Axure使用:原型中如何实现图片轮播效果
Axure使用:原型中如何实现图片轮播效果
Axure使用:原型中如何实现图片轮播效果

8、【注意1】加载时默认显示第一张图片。设置第一个按钮为选中状态。【注意2】按钮一次只能选中一个,记得给他们放到一个组里面哦。【注意3】不要忘记把按钮移动到图片上面去。来看下效果。

Axure使用:原型中如何实现图片轮播效果
Axure使用:原型中如何实现图片轮播效果
Axure使用:原型中如何实现图片轮播效果
© 手抄报圈