Axure 动态面板初使用 - 实现简单的Banner图轮播效果

使用工具版本

Axure 9

实现的效果

步骤过程

1、打开Axure工具,从元件库拖个动态面板到空白页;

2、给面板设置一个常用的banner尺寸,举个栗子:343×151(移动端我常用的banner尺寸),顺便给它起个名字,就叫[轮播面板];

3、双击轮播面板,进入编辑状态;

4、然后给面板再添加2个状态,并分别命名为[b1]、[b2]、[b3];

5、回到[b1]状态,从元件库拖个矩形到页面,并把矩形调整到跟[b1]状态相同大小尺寸、位置,顺便给它个颜色;

6、再从原件库,拖3个椭圆形到页面,将尺寸设为8×8大小;

7、将第一个椭圆设置成黑色,跟另两个作区别;

8、然后将[b1]内所有元素选中(Ctrl+A全选),复制后,选择[b2]状态,把所有元素复制粘贴到[b2]页面内;

9、在[b2]中调整椭圆点,将第二个圆点调整为黑色,第一个还原成白色,并将背景色换成另一种颜色;

10、同样复制全部粘贴到[b3]状态页面内,并调整第三个圆点成黑色,另两个为白色,背景色再换一个颜色;

11、点击【关闭】按钮,关闭面板编辑模式,鼠标点击空白区域,新建页面交互(注意是页面交互);

12、选择"页面 载入时",

13、选择"设置面板状态";

14、选择"轮播面板";

15、设置状态为[下一项],勾选"向后循环",进入动画和退出动画选择"逐渐",默认"500"毫秒,打开"更多选项",勾选"循环间隔",设置为"3000"毫秒,点击【完成】;

16、点击【预览】,在浏览器中打开,就可以看到效果了

17、可以按F12,调出开发者工具,选择手机模拟浏览效果。

18、浏览器手机模拟效果动图:

以上就是本次关于 Axure 动态面板中怎么实现一个简单的 Banner 轮播图效果的教程,希望能帮助你更了解 Axure 的动态面板。


1\] Axure 动态面板:[Axure 动态面板初使用-实现简单的tab切换页面效果](https://mp.weixin.qq.com/s/8RvcTh-fvwHYedNUrt-RoQ) \[2\] [原文阅读](https://mp.weixin.qq.com/s/vB92HpsVt4LSF-bFXee4Lg) 我是Just,这里是「设计师工作日常」,求点赞求关注!!!

相关推荐
Larry_Yanan6 小时前
QML学习笔记(四十三)QML与C++交互:上下文属性暴露
c++·笔记·qt·学习·ui·交互
liulilittle7 小时前
国际带宽增长与用户体验下降的悖论
网络·网络协议·信息与通信·ip·ux·带宽·通信
安卓开发者9 小时前
鸿蒙NEXT应用接入快捷栏:一键直达,提升用户体验
java·harmonyos·ux
HMS Core9 小时前
消息推送策略:如何在营销与用户体验间找到最佳平衡点
华为·harmonyos·ux
top_designer9 小时前
告别“静态”VI手册:InDesign与AE打造可交互的动态品牌规范
设计模式·pdf·交互·vi·工作流·after effects·indesign
嵌入式学习和实践10 小时前
C# WinForms 多窗口交互通信的示例-主窗口子窗口交互通信
c#·交互·主窗口-子窗口通信
知识分享小能手19 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
Larry_Yanan1 天前
QML学习笔记(四十二)QML的MessageDialog
c++·笔记·qt·学习·ui
Javashop_jjj1 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Ya-Jun1 天前
快应用TypeError: The ‘compilation‘ argument must be an instance of Compilation错误
node.js·ux·js