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

广告图轮播在日常的原型设计中是最常见的了,分享一个如何制作自动轮播+手工点击切换,文章底部有一个我制作好的原型文件下载供大家学习使用。

1. 先画轮播图的整体的结构

如下图:动态面板(750*350)、焦点样式(3个圆点,8*8)

动态面板:给动态面板每一层面板填充不同的颜色,在面板上输入文字(我直接输入第一张广告图这样,方便我们观看效果吧)

焦点样式对应的三张图,分三帧,每帧里面有三个点(如果你是五张轮播图,那就是五帧,每帧里面五个点这个好理解吧)如下图:(需注意的是,对应帧的圆点需要更换对应的颜色,如:第一帧圆点1为黑色时,其他圆点为白色,第二帧圆点2为黑色,其他圆点为白色。以此类推...)

上面做好之后,我们就开始做效果

2. 自动轮播

左侧概要下选择 【动态面板】 —  右侧点击【新建交互 New Interaction】 — 选择【载入时】— 【设置面板状态】设置好参数

自动轮播到这里就设置好了,F5看看效果

3. 点击圆点切换

给焦点样式下面的第一帧里的圆点1添加一个鼠标单击时的交互,【设置面板状态】面板状态为第一张广告图时,对应圆点1;面板状态为第二张广告图时,对应圆点2;面板状态为第三张广告图时,对应圆点3。第二帧、第三帧都是这样设置。

到此,效果基本完成,如果还需要增添左右按键切换方法也类似,大家可以尝试。

【免费下载】

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

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

暂无评论

相关推荐

小米推出可免费商用全新MiSans字体

小米推出了全新的小米 12 系列产品以及 MIUI 13 等新品 同时还带来了一款全新系统字体 MiSans MIUI 13 便是采用了这种全新的系统字体 MiSans 官方介绍,MiSans 笔型平直有力,设计更加简约,减少视觉负担,更有利于 ...

UI设计师经常会遇到的一些问题

今天和大家分享几个每个ui设计师都会遇到的知识点,内容如下: 01  底部导航和内容的区分方式 大部分app产品页面都是带有底部导航的,正常来说,底部导航是需要和内容部分做一点区分的,如果底部导航是纯白色,内容 ...

【控件】Picker-选择器/拾取器

Picker(选择器/拾取器/选取器)是指提供多个选项集合供用户选择其中一项的控件。在不同平台Picker的具体控件表现形式不同。在iOS端Picker一般称之为滚轮选择器,而在Android端,Picker的主要表现形式是Dialog(对话 ...

B端设计素材整理(持续更新ing)

文末下载链接为全部整理后打包的文件分享↓↓↓ 11月11日 【组件】滴滴移动端组件库 mand-mobile-design.sketch  提取码:tnzy   【素材】GT 架构图工具包.fig GT 架构图工具包-轴侧风格 .fig  提取码:f0a3 &nbsp ...

微信扫一扫

微信扫一扫

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

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