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切换页面效果

[2] 原文阅读

我是Just,这里是「设计师工作日常」,求点赞求关注!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/662435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT学习日记 | 信号与槽

目录 前言 一、初始信号与槽 1、信号与槽的本质 2、信号与槽的使用 3、内置信号、内置槽函数与自定义信号、自定义槽函数 (1)文档查询 (2)自定义信号与内置槽函数的使用 4、信号与槽函数关联关系 5、带参数的信号与槽函数…

【软件设计师笔记】程序语言设计考点

【考证须知】IT行业高含金量的证书(传送门)💖 【软件设计师笔记】计算机系统基础知识考点(传送门)💖 【软件设计师笔记】操作系统考点(传送门)💖 🐓 编程语言之间的翻译形式 汇编 高级程序不能直接在计算机上执行,…

yolov8训练自己的关键点检测模型

参考: https://blog.csdn.net/weixin_38807927/article/details/135036450 标注数据集 安装labelme pip install labelme -i https://pypi.tuna.tsinghua.edu.cn/simple如果报错 $ labelme 2024-01-31 03:16:20,636 [INFO ] __init__:get_config:67- Loading …

YOLOv5改进系列(29)——添加DilateFormer(MSDA)注意力机制(中科院一区顶刊|即插即用的多尺度全局注意力机制)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制

面试宝典之深谈JVM

面试宝典之深谈JVM 1.为什么需要JVM,不要JVM可以吗? 1.JVM可以帮助我们屏蔽底层的操作系统 一次编译,到处运行 2.JVM可以运行Class文件 2.JDK,JRE以及JVM的关系 3.我们的编译器到底干了什么事? 仅仅是将我们的 .ja…

深入理解 Golang 的 crypto/elliptic:椭圆曲线密码学的实践指南

深入理解 Golang 的 crypto/elliptic:椭圆曲线密码学的实践指南 引言crypto/elliptic 库概览基本使用教程高级应用案例性能与安全考量结论 引言 在当今数字时代,数据安全和加密技术成为了信息技术领域的重中之重。特别是在网络通信和数据存储领域&#…

如何系统的自学Python?通义千问、讯飞星火、文心一言及ChatGPT的回答

如何系统的自学Python?来看看通义千问、讯飞星火、文心一言及ChatGPT的回答. 第一个是马老师的通义千问 系统地自学Python是一个循序渐进的过程,从基础语法到实践项目,再到专业领域的深入学习。下面是一个详细的步骤指南: 了解Py…

控制台npm start终止不了?

控制台npm start终止不了? 在开发的过程中我遇到了这样的问题,想结束控制台3002端口运行,但是ControlC不起作用,不管我敲多少遍,依旧没有任何动静: 再次启动的时候它又会自动启动3003端口,300…

Kotlin 协程:深入理解 ‘async { }‘

Kotlin 协程:深入理解 ‘async { }’ Kotlin 协程是一种强大的异步编程工具,它提供了一种简洁、易读的方式来处理并发和异步操作。在 Kotlin 协程库中,async {} 是一个关键的函数,它允许我们启动一个新的协程,并返回一…

【大厂AI课学习笔记】1.4 算法的进步(2)

关于感知器的兴衰。 MORE: 感知器的兴衰 一、感知器的发明与初期振动 在人工智能的历史长河中,感知器(Perceptron)无疑是一个里程碑式的存在。它最初由心理学家Frank Rosenblatt在1950年代提出,并在随后的几年中得到…

【数字电子技术课程设计】多功能数字电子钟的设计

目录 摘要 1 设计任务要求 2 设计方案及论证 2.1 任务分析 2.1.1 晶体振荡器电路 2.1.2 分频器电路 2.1.3 时间计数器电路 2.1.4 译码驱动电路 2.1.5 校时电路 2.1.6 整点报时/闹钟电路 2.2 方案比较 2.3 系统结构设计 2.4 具体电路设计 3 电路仿真测试及结…

京东物流基于 StarRocks 的数据分析平台建设

作者:京东物流 数据专家 刘敬斌 小编导读: 京东集团 2007 年开始自建物流,2017 年 4 月正式成立京东物流集团,截至目前,京东物流已经构建了一套全面的智能物流系统,实现服务自动化、运营数字化及决策智能化…

开源编辑器:ONLYOFFICE文档又更新了!

办公软件 ONLYOFFICE文档最新版本 8.0 现已发布:PDF 表单、RTL、单变量求解、图表向导、插件界面设计等更新。 什么是 ONLYOFFICE 文档 ONLYOFFICE 文档是一套功能强大的文档编辑器,支持编辑处理文本文档、电子表格、演示文稿、可填写的表单、PDF&#…

Java基础学习:System类和Static方法的实际使用

一、System类 1.在程序开发中,我们需要对这个运行的结果进行检验跟我们预判的结果是否一致,就会用到打印结果在控制台中显示出来使用到了System类。System类定义了一些和系统相关的属性和方法,它的属性和方法都是属于静态的,想使用…

数字孪生 三维建模方式以及细节步骤流程

对于数字孪生这个概念,三维建模不同行业认知都不尽相同。有的行业认为数字孪生重点在于建模,有的行业认为在于物联感知,还有部分认为是虚拟仿真。今天重点从建模角度和大家谈谈数字孪生技术常用的三维建模方式以及精细度分级。 数字孪生平台…

钉钉群机器人-发送群消息

1、钉钉群创建机器人 添加完成后,要记住 Webhook 路径; 2、机器人接入文档网址 自定义机器人接入 - 钉钉开放平台 3、JAVA代码 import com.dingtalk.api.DefaultDingTalkClient; import com.dingtalk.api.DingTalkClient; import com.dingtalk.api.re…

【靶场实战】Pikachu靶场XSS跨站脚本关卡详解

Nx01 系统介绍 Pikachu是一个带有漏洞的Web应用系统,在这里包含了常见的web安全漏洞。 如果你是一个Web渗透测试学习人员且正发愁没有合适的靶场进行练习,那么Pikachu可能正合你意。 Nx02 XSS跨站脚本概述 Cross-Site Scripting 简称为“CSS”&#xff…

聊聊ClickHouse MergeTree引擎的固定/自适应索引粒度

前言 我们在刚开始学习ClickHouse的MergeTree引擎时,就会发现建表语句的末尾总会有SETTINGS index_granularity 8192这句话(其实不写也可以),表示索引粒度为8192。在每个data part中,索引粒度参数的含义有二&#xf…

Flink 流式读取 Debezium CDC 数据写入 Hudi 表无法处理 -D / Delete 消息

问题场景是:使用 Kafka Connect 的 Debezium MySQL Source Connector 将 MySQL 的 CDC 数据 (Avro 格式)接入到 Kafka 之后,通过 Flink 读取并解析这些 CDC 数据,然后以流式方式写入到 Hudi 表中,测试中发现…

Linux mount

挂载移动硬盘 1、通过 命令 fdisk -l 查看移动硬盘 2、创建 挂载点及文件 mkdir zen 3、mount -t ntfs /dev/sdb1 zen 报错:mount: unknown filesystem type ‘ntfs’ 需要安装ntfs-3g 如下才用编译安装方法: wget https://tuxera.com/opensource/ntf…