Axure设计之轮播图(动态面板+中继器)

轮播图(Carousel)是一种网页或应用界面中常见的组件,用于展示一系列的图片或内容,通常通过自动播放或用户交互(如点击箭头按钮)来切换展示不同的内容。轮播图能够吸引用户的注意力,有效展示重要信息或推广内容。下面将简要介绍轮播图的基本组成和如何实现。

一、效果展示

 原型预览地址:Axure

二、实现思路(了解轮播图的基本组成)

  1. 图片或内容区:这是轮播图的核心部分,用于展示图片、视频、文字或其他媒体内容。
  2. 指示器:通常是一系列的小圆点或数字,表示当前显示的是第几张内容,并允许用户点击直接跳转到指定内容。
  3. 控制按钮:左右箭头按钮或其他形式的控件,允许用户通过点击来切换显示的内容。
  4. 自动播放功能:许多轮播图都具备自动播放功能,即按照一定的时间间隔自动切换到下一张内容。

 三、实现步骤

      根据实现思路我们应该能理解实现基本原理及大概步骤:

1、第一步,按照思路,我们先实现图片内容区,使用动态面板实现(动态面板添加状态,每个状态为轮播的图片):

2、第二步,添加底部新闻标题,考虑到图片切换时需与标题对应,所以标题我们使用中继器完成;

3、第三步,左下角添加指示器,我们用圆点制作,并添加选项组,设置每个圆点的选中时的交互样式;

4、第四步,在左右两侧增加控制按钮,这里为了交互好看,当鼠标移入按钮时呈现不同的效果,我们可以使用动态面板设置两种状态,未选中和选中状态设置不同的效果。

5、第五步,所有元件都添加好之后,我们设置交互事件:

给图片区域动态面板设置交互事件:

给左右侧控制按钮设置交互事件:

 好了,其实通过上面的方式实现发现是不是很简单,欢迎评论点赞。

原型下载地:https://download.csdn.net/download/u010709330/89567542

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

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

相关文章

新手小白的pytorch学习第十一弹-----Computer Vision创建基础模型使用FashionMNIST

目录 PyTorch Computer Vision0 PyTorch 中 Computer vision 的库1 获得一个数据集1.1 查看数据的输入和输出形状1.2 可视化数据 2 准备 DataLoader3 Model 0: 创建一个 baseline model3.1 设置损失函数、优化器和评估指标3.2 创建一个函数来给我们的实验计时3.3 在批量数据集上…

萝卜快跑:自动驾驶的先锋与挑战

萝卜快跑:自动驾驶的先锋与挑战 近段时间,由萝卜快跑引发的自动驾驶事件如火如荼,成为科技领域的热门话题。萝卜快跑作为自动驾驶领域的重要参与者,其最新事件引发了广泛的关注和讨论。 萝卜快跑是百度推出的自动驾驶出行服务平台…

20240724-然后用idea创建一个Java项目/配置maven环境/本地仓储配置

1.创建一个java项目 (1)点击页面的create project,然后next (2)不勾选,继续next (3)选择新项目名称,新项目路径,然后Finsh,在新打开的页面选择…

Hadoop、Hive、HBase、数据集成、Scala阶段测试

姓名: 总分:Hadoop、Hive、HBase、数据集成、Scala阶段测试 一、选择题(共20道,每道0.5分) 1、下面哪个程序负责HDFS数据存储( C ) A. NameNode B. Jobtracher C. DataNode D. Sec…

鸿蒙界面开发

界面开发 //构建 → 界面 build() {//行Row(){//列Column(){//文本 函数名(参数) 对象.方法名(参数) 枚举名.变量名Text(this.message).fontSize(40)//设置文本大小.fontWeight(FontWeight.Bold)//设置文本粗细.fontColor(#ff2152)//设置文本颜色}.widt…

3.JAVA-IDEA

IDEA介绍 下载安装 实际操作 免费试用,可以选第一个自己找到密匙开锁 首先新建project项目 建立空项目 起名并存储位置选择 确定创建项目 成功新建项目,开始新建模块 新建或导入模块 新建java模块 修改名称,位置保持默认 同样yes建立 ok即可 …

2 YOLO8的使用

1 介绍 YOLOv8是YOLO (You Only Look Once) 目标检测模型系列的最新版本,由Ultralytics公司开发和维护。YOLOv8是在先前版本的基础上进行的重大更新,不仅提升了性能,还增加了更多的功能,它不仅能够进行目标检测,还能完…

职业教育综合布线实验实训室建设应用案例

在信息技术迅猛发展的今天,综合布线技术已成为智能建筑、数据中心等基础设施不可或缺的一部分。唯众,作为职业教育领域的先行者,早在多年前便洞悉行业趋势,率先涉足综合布线实训室的建设,凭借丰富的经验和持续的创新&a…

phpstorm配置xdebug3

查看php路径相关信息 php --ini安装xdebug https://www.jetbrains.com/help/phpstorm/2024.1/configuring-xdebug.html?php.debugging.xdebug.configure php.ini 配置 在最后添加,以下是我的配置 [xdebug] zend_extension/opt/homebrew/Cellar/php8.1/8.1.29/p…

决策树 和 集成学习、随机森林

决策树是非参数学习算法,可以解决分类问题,天然可以解决多分类问题(不同于逻辑回归或者SVM,需要通过OVR,OVO的方法),也可以解决回归问题,甚至是多输出任务,并且决策树有非…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十一章 添加设备树节点

i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

通过4G模块EC600N向阿里云物联网平台物模型上面发送字符串,现在发送int数据是成功的,发送字符串就是不成功

🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…

轻量化YOLOv7系列:结合G-GhostNet | 适配GPU,华为诺亚提出G-Ghost方案升级GhostNet

轻量化YOLOv7系列:结合G-GhostNet | 适配GPU,华为诺亚提出G-Ghost方案升级GhostNet 需要修改的代码models/GGhostRegNet.py代码 创建yaml文件测试是否创建成功 本文提供了改进 YOLOv7注意力系列包含不同的注意力机制以及多种加入方式,在本文…

【Python】Facebook开源时间序列数据预测模型Prophet

文章目录 一、简介二、项目的文件解读三、Prophet类主要方法和参数3.1 主要参数3.2 主要方法 四、用法示例 一、简介 Prophet 是由 Facebook 开发的一个开源工具,用于时间序列数据的预测。它特别适用于处理具有强季节性和趋势的时间序列数据,并且对节假…

大数据之Oracle同步Doris数据不一致问题

数据同步架构如下: 出现的问题: doris中的数据条数 源库中的数据条数 总数完全不一致。 出现问题的原因: 在Dinky中建立表结构时,缺少对主键属性的限制 primary key(ID) not enforced 加上如上语句,数据条数解决一致 …

App Instance 架构示例

前言 在Unity程序设计过程中,我们处理的第一个对象是Application Instance。 它的主要职责是启动流程管理、卸载流程管理,次要职责是管理在内部的子系统生命周期。其他职责,提供或桥接应用程序的配置信息、及其他第三方接口。 它通常以单例的…

51单片机嵌入式开发:18、STC89C52RC嵌入式DS1302实时时钟实验及数码管显示

STC89C52RC嵌入式DS1302实时时钟实验及数码管显示 STC89C52RC嵌入式DS1302实时时钟实验及数码管显示1 概述1.1 DS1302简介1.2 DS1302功能和特点1.3 DS1302工作原理1.4 DS1302应用领域 2 DS1302设计原理2.1 引脚说明2.2 寄存器说明及使用(1)命令cmd字节说…

【PPT把当前页输出为图片】及【PPT导出图片模糊】的解决方法(sci论文图片清晰度)

【PPT把当前页输出为图片】及【PPT导出图片模糊】的解决方法 内容一:ppt把当前页输出为图片:内容二:ppt导出图片模糊的解决方法:方法:步骤1:打开注册表编辑器步骤2:修改注册表: 该文…

【BUG】已解决:SyntaxError:positional argument follows keyword argument

SyntaxError:positional argument follows keyword argument 目录 SyntaxError:positional argument follows keyword argument 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰&#xff0c…

jupyter_contrib_nbextensions安装失败问题

目录 1.文件路径长度问题 2.jupyter不出现Nbextensions选项 1.文件路径长度问题 问题: could not create build\bdist.win-amd64\wheel\.\jupyter_contrib_nbextensions\nbextensions\contrib_nbextensions_help_item\contrib_nbextensions_help_item.yaml: No su…