Axure教程:banner广告图片自动轮播+点击切换

广告图轮播在日常的原型设计中是最常见的了,分享一个如何制作自动轮播+手工点击切换,文章底部有一个我制作好的原型文件下载供大家学习使用。
1. 先画轮播图的整体的结构 如下图:动态面板(750*350)、焦点样式(3个圆点,8*8) 动态面板:给动态面板每一层面板填充不同的颜色,在面板上输入文字(我直接输入第一张广告图这样,方便我们观看效果吧)
焦点样式对应的三张图,分三帧,每帧里面有三个点(如果你是五张轮播图,那就是五帧,每帧里面五个点这个好理解吧)如下图:(需注意的是,对应帧的圆点需要更换对应的颜色,如:第一帧圆点1为黑色时,其他圆点为白色,第二帧圆点2为黑色,其他圆点为白色。以此类推...)
上面做好之后,我们就开始做效果 2. 自动轮播 左侧概要下选择 【动态面板】 —  右侧点击【新建交互 New Interaction】 — 选择【载入时】— 【设置面板状态】设置好参数
自动轮播到这里就设置好了,F5看看效果 3. 点击圆点切换 给焦点样式下面的第一帧里的圆点1添加一个鼠标单击时的交互,【设置面板状态】面板状态为第一张广告图时,对应圆点1;面板状态为第二张广告图时,对应圆点2;面板状态为第三张广告图时,对应圆点3。第二帧、第三帧都是这样设置。
到此,效果基本完成,如果还需要增添左右按键切换方法也类似,大家可以尝试。

【免费下载】

banner广告图片自动轮播+点击切换(源文件)

百度网盘下载 (提取码:0rh8)

0
Avatar

阿飞锅不董事

学习是进步的基石

Leave a Reply

Your email address will not be published. Required fields are marked *

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

Axure教程:banner广告图片自动轮播+点击切换
嘿!有什么能帮到您的吗?
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close