手机
当前位置:查字典教程网 >软件教程 >其他软件工具 >Axure设计图片轮番播放效果的网页原型的教程
Axure设计图片轮番播放效果的网页原型的教程
摘要:axure是一个非常实用的原型制作工具,产品经理、产品助理、交互设计师经常用到它,那怎么使用axure实现广告轮播图效果呢?1、创建两个动态...

axure是一个非常实用的原型制作工具,产品经理、产品助理、交互设计师经常用到它,那怎么使用axure实现广告轮播图效果呢?

1、创建两个动态面板,一个用于轮播图片,命名为【背景图片】,一个用于图片中的小圆点,命名为【圆点】

Axure设计图片轮番播放效果的网页原型的教程1

Axure设计图片轮番播放效果的网页原型的教程2

2、然后再对应的【背景图片】动态图中添加3个动态,并每个动态设置对应添加图片,本文以占位符代替

Axure设计图片轮番播放效果的网页原型的教程3

3、然后设置【圆点】动态图中添加三种圆点动态,效果见下图

Axure设计图片轮番播放效果的网页原型的教程4

Axure设计图片轮番播放效果的网页原型的教程5

Axure设计图片轮番播放效果的网页原型的教程6

4、这一步最关键,对动态面板设置【载入时】动作,先设置等待3000毫秒,再设置面板状态【背景图片】 下一步 ->从最后一个到第一个自动跳转 ->重复每个3000毫秒切换->进入动画向左滑动用时500毫秒->退出时动画向左滑动用时500毫秒,再设置面板状态【圆点】下一步->从最后一个到第一个自动跳转 ->重复每个3000毫秒切换。点击确定。

Axure设计图片轮番播放效果的网页原型的教程7

Axure设计图片轮番播放效果的网页原型的教程8

Axure设计图片轮番播放效果的网页原型的教程9

5、好了,到此为止最简单的axure广告轮播图效果到此为止,快点击F5预览下效果吧

注意事项:

动作设置为载入时需要设置等待动作,不然一加载的时候就会切换到第二张图片的。

【Axure设计图片轮番播放效果的网页原型的教程】相关文章:

足记电脑版怎么用?足记PC版配电影字幕效果教程

AxureRP 7.0实现天猫登录的详细教程

有道云笔记之添加图片到笔记本的方法

axure怎么绘制APP菜单阻尼滑动的原型图?

搜狗浏览器怎么抢票 搜狗浏览器12306抢票教程图文详解

互粉多是什么 互粉多使用图文教程以及互粉多获得积分攻略

Axure绘制好的原型怎么发布和预览?

axure rp 8.0怎么制作幻灯片效果的网页原型?

Axure8怎么使用动态面板?Axure8的使用教程

淘宝设计师助手使用图文教程

精品推荐
分类导航