HTML 轮播图（Carousel）详细讲解
HTML 轮播图（Carousel）详细讲解
轮播图（Carousel）是一种常见的用户界面组件，用于在同一位置展示多个图像或内容，允许用户通过滑动或自动播放的方式查看不同的内容。它通常用于展示产品、图片、广告等。
1. 轮播图的结构
轮播图通常由以下几个部分组成：
- 容器：包裹所有轮播项的外部容器。
- 轮播项：每个单独的内容或图像。
- 导航控件：用于切换到下一个或上一个轮播项的按钮。
- 指示器：显示当前轮播项的指示器（可选）。
2. HTML 示例
以下是一个简单的 HTML 轮播图示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图示例</title><style>/* 样式设置 */.carousel {position: relative;max-width: 600px;margin: auto;overflow: hidden;}.carousel-inner {display: flex;transition: transform 0.5s ease;}.carousel-item {min-width: 100%;box-sizing: border-box;}.carousel img {width: 100%;height: auto;}.carousel-control {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer;}.carousel-control.left {left: 10px;}.carousel-control.right {right: 10px;}</style>
</head>
<body><div class="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="https://via.placeholder.com/600x300?text=图片1" alt="图片1"></div><div class="carousel-item"><img src="https://via.placeholder.com/600x300?text=图片2" alt="图片2"></div><div class="carousel-item"><img src="https://via.placeholder.com/600x300?text=图片3" alt="图片3"></div></div><button class="carousel-control left" onclick="prevSlide()">❮</button><button class="carousel-control right" onclick="nextSlide()">❯</button>
</div><script>let currentIndex = 0;function showSlide(index) {const items = document.querySelectorAll('.carousel-item');const totalItems = items.length;// 确保索引在范围内if (index >= totalItems) {currentIndex = 0;} else if (index < 0) {currentIndex = totalItems - 1;} else {currentIndex = index;}// 更新轮播图位置const carouselInner = document.querySelector('.carousel-inner');carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;}function nextSlide() {showSlide(currentIndex + 1);}function prevSlide() {showSlide(currentIndex - 1);}
</script></body>
</html>
3. 代码解析
-
HTML 结构：
- 使用
<div>元素创建轮播图的容器和内部项。 - 每个轮播项使用
<div class="carousel-item">包裹，并包含一个<img>元素。
- 使用
-
样式（CSS）：
- 设置轮播图的最大宽度和居中对齐。
- 使用
flex布局使轮播项在一行内排列，并通过transform属性实现滑动效果。 - 定义导航按钮的位置和样式。
-
JavaScript 功能：
showSlide函数根据当前索引显示相应的轮播项。nextSlide和prevSlide函数用于切换到下一个或上一个轮播项。
4. 使用场景
轮播图适用于以下场景：
- 产品展示：在电商网站中展示不同产品或促销活动。
- 图片库：展示摄影作品、旅游照片等。
- 广告宣传：展示新产品、活动或重要信息。
总结
轮播图是一种有效的展示方式，可以在有限的空间内展示多个内容。通过简单的 HTML、CSS 和 JavaScript，可以轻松实现这一功能，增强用户体验。
相关文章：
HTML 轮播图（Carousel）详细讲解
HTML 轮播图（Carousel）详细讲解 轮播图（Carousel）是一种常见的用户界面组件，用于在同一位置展示多个图像或内容，允许用户通过滑动或自动播放的方式查看不同的内容。它通常用于展示产品、图片、广告等。 1…...
计算机网络-数据链路层（ppp协议）
2.2 ppp协议 点对点协议ppp是目前使用最广泛的点对点数据链路层协议。 2.3 媒体接入控制基本概念 共享信道要着重考虑的一个问题就是如何协调多个发送和接收站点对一个共享传输媒体的占用，即媒体接入控制MAC。 2.3.1 静态划分信道 频分复用 时分复用 波分复用 码分复…...
如何优化Python网络爬虫的数据清洗流程，以提升数据质量并有效应对网站反爬虫机制？
优化爬虫数据清洗流程，应对反爬虫机制 一、数据清洗的重要性 在网络爬虫中，数据清洗是关键环节。打个比方，我们从网页抓取到的原始数据就像一堆杂乱的杂物，里面有各种格式、错误和重复信息。比如抓取到的文本可能包含HTML标签、…...
QSharedMemory 实现数据exe间共享
定义共享数据结构 首先，需要定义一个结构体来包含要共享的数据。这个结构体应该包含所有需要在多个类的实例之间共享的成员变量 struct SharedData {int intValue;QString stringValue;// 可以添加更多需要共享的成员变量}; 使用 QSharedMemory 进行数据共享 在写…...
强化学习（1）
Reinforcement Learning Goal-directed learing from ineraction with the environment. 1. Basic Element 基本元素 1.1 Agent 玩家 1.2 Environment 1.3 Goal 2. Main Element 主要元素 2.1 State 2.2 Action 状态与行为往复 2.3 Reward 目标：最大化总…...
Spring Boot 嵌套事务详解及失效解决方案
在复杂的业务场景中，嵌套事务可以帮助我们更加精细地控制数据的一致性。然而，在 Spring Boot 中，如果嵌套事务的配置不当，可能会导致事务不生效的问题，尤其是在同一个类中进行方法调用时。 本文将详细介绍嵌套事务的原…...
IDEA 社区版 SpringBoot不能启动
报错原因，Failed to load class [javax.servlet.Filter] <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope> </dependency>…...
【SQL server】教材数据库（4）
学生（学号，年龄，性别，系名） 教材（编号，书名，出版社编号，价格） 订购（学号，书号，数量） 出版社（编…...
px、em、rem,vw区别介绍
在网页设计中，px、em、rem 和 vw 都是常用的 CSS 单位，它们各自有不同的用途和特性。下面是这些单位的详细介绍及其区别： 1. px（像素） 定义： px 是最常用的绝对单位，表示屏幕上的一个物理像素…...
pip安装paddle失败
一、pip安装paddle失败，报错如下 Preparing metadata (setup.py) ... error error: subprocess-exited-with-error import common, dual, tight, data, prox ModuleNotFoundError: No module named common [end of output] 二、解决方法： 按照提示安装对…...
QWT 之 QwtPlotDirectPainter直接绘制
QwtPlotDirectPainter 是 Qwt 库中用于直接在 QwtPlot 的画布上绘制图形的一个类。它提供了一种高效的方法来实时更新图表，特别适合需要频繁更新的数据可视化应用，例如实时数据流的显示。 使用 QwtPlotDirectPainter 的主要优势在于它可以绕过 QwtPlot 的…...
编辑音频的基本属性
导入音频 “文件-导入-选择音频”拖到音频轨道创建序列。选择音频，在效果空间可以看到音频的基本属性。 音量的设置 “效果工作区-效果控件-音量”在这里可以控制所有引导的混合音量 静音 静止所有声音 音频仪表 一般位于时间轴的后面，找不到可以…...
【英特尔IA-32架构软件开发者开发手册第3卷：系统编程指南】2001年版翻译，2-44
文件下载与邀请翻译者 学习英特尔开发手册，最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册，会是一件耗时费力的工作。如果有愿意和我一起来做这件事的，那么ÿ…...
格式化输出年月日
直接上图 结论：老老实实用yyyy，得到的年月日是我们口头上说的时间，而YYYY有点反人类.... 对于一年的最后一周的一些日子，会统计成下一年； 对于下一年的第一周的一些日子，会统计成上一年； 你猜…...
解决Spring boot集成quartz时service注入失败为null的问题
解决Spring boot集成quartz时service注入失败为null的问题 一、报错信息二、代码任务类源代码配置类原代码 三、注入失败原因四、解决的思路11、任务类修改2、配置类修改 五、 解决的思路2 一、报错信息 java.lang.NullPointerException: null at farbun.server.scheduledTask…...
Python 青铜宝剑十六维，破医疗数智化难关（下）
九、模型可靠性的验证秘籍 在医疗数智化进程中，模型可靠性宛如一座灯塔，为精准医疗决策指引方向。以疾病诊断模型为例，一旦模型可靠性存疑，在癌症早期筛查场景下，可能将良性病变误判为恶性，让患者承受不必要的痛苦与恐慌，又或是遗漏细微癌变迹象，延误最佳治疗时机；在…...
初识具身智能
具身智能是智能科学的一个基础问题，在过去的5.4亿年以来，地球上所有生物都是通过身体和环境交互、进化逐步产生的。通俗地讲，具身智能体以第一人称视角身临其境地从环境交互中理解外部世界的本质概念，被认为是通向通用人工智能的重…...
Node 使用pkg打包部署
一、安装pkg(不太好装，需要借助国内镜像) npm install -g pkg --registryhttps://registry.npm.taobao.org 二、配置package.jsonsan // package.json ,配置专门制定pkg的执行入口 { ... "bin": "main.js", "pkg":{"assets&q…...
计算机网络-L2TP Over IPSec基础实验
一、概述 上次我们进行了标准L2TP的配置，但是在最后我们在进行业务流量访问时看到流量是没有进行加密的，这就导致可能得安全风险，所以这里其实可以退像GRE那样调用IPSec框架来进行加密保护。 拓扑 数据不加密 现在需要配置IPSec，然…...
Java工程师实现视频文件上传minio文件系统存储及网页实现分批加载视频播放
Java工程师实现minio存储大型视频文件网页实现分批加载视频播放 一、需求说明 老板给我出个题目，让我把的电影文件上传到minio文件系统，再通过WEB端分配加载视频播放，类似于我们普通的电影网站。小编把Java代码共享出来。是真正的能拿过来直…...
html5css3
1.html5新增语义化标签 <header><nav><article><section><aside><footer> 2.新增多媒体标签 视频<video>格式：map4,webm,ogg <video controls"controls" autoplay"autoplay" muted"mute…...
运维人员的Go语言学习路线
以下是一份更为详细的适合运维人员的Go语言学习路线图： 一、基础环境搭建与入门（第 1 - 2 周） 第 1 周 环境搭建 在本地开发机和常用的运维服务器环境（如 Linux 系统）中安装 Go 语言。从官方网站（https://…...
怎么在家访问公司服务器？
在日常工作中，特别是对信息技术从业者而言，工作往往离不开公司的服务器。他们需要定期访问服务器，获取一些关键的机密文件或数据。如果您在家办公，并且需要处理未完成的任务，同时需要从公司服务器获取所需的数据&#…...
ext2 文件系统的认识与构成)
【linux学习指南】】Ext系列文件系统(三)ext2 文件系统的认识与构成
文章目录 📝ext2 ⽂件系统🌠 宏观认识🌉 Block Group 🌠块组内部构成🌉超级块（SuperBlock） 🌠GDT（GroupDescriptorTable）🌉块位图（Blo…...
区块链安全常见的攻击分析——Unprotected callback - ERC721 SafeMint reentrancy【8】
区块链安全常见的攻击分析——Unprotected callback - ERC721 SafeMint reentrancy【8】 1.1 漏洞分析1.2 漏洞合约1.3 攻击分析1.4 攻击合约 重点：MaxMint721 漏洞合约的 mint 函数调用了 ERC721 合约中的 _checkOnERC721Received 函数，触发 to 地址中实…...
Linux中sed命令的使用技巧
一、sed语法介绍 sed命令主要用于文本内容的编辑，默认只处理模式空间，不处理原数据。 命令格式： sed [option] command filename示例：删除空白行 sed ‘/^\s*$/d’ filename option 参数： -n：只有经过sed…...
小米路由器开启SSH，配置阿里云ddns，开启外网访问SSH和WEB管理界面
文章目录 前言一、开启SSH二、配置阿里云ddns1.准备工作2.创建ddns脚本3.添加定时任务 三、开启外网访问SSH和WEB管理界面1、解除WEB管理页面访问限制2.手动添加防火墙端口转发规则，开启外网访问WEB管理和SSH 前言 例如：随着人工智能的不断发展…...
Flink源码解析之：如何根据JobGraph生成ExecutionGraph
Flink源码解析之：如何根据JobGraph生成ExecutionGraph 在上一篇Flink源码解析中，我们介绍了Flink如何根据StreamGraph生成JobGraph的流程，并着重分析了其算子链的合并过程和JobGraph的构造流程。 对于StreamGraph和JobGraph的生成来说&…...
活动预告 |【Part2】Microsoft 安全在线技术公开课：安全性、合规性和身份基础知识
课程介绍 通过参加“Microsoft 安全在线技术公开课：安全性、合规性和身份基础知识”活动提升你的技能。在本次免费的介绍性活动中，你将获得所需的安全技能和培训，以创造影响力并利用机会推动职业发展。你将了解安全性、合规性和身份的基础知…...
:网络协议-TCP/IP协议栈)
网络基础入门到深入(2):网络协议-TCP/IP协议栈
目录 一.TCP/IP协议栈的四层结构 二.每一层的作用与协议 1.作用层 作用： 常见协议: 示例: 2.传输层 作用: 核心功能: 3.网络层 作用: 核心功能: 常见协议: 示例: 4.数据链路层(物理层) 作用: 核心功能: 常见技术: 示例: 三.TCP/IP协议栈的分层…...
美畅物联丨视频上云网关获取视频流地址供第三方调用的方法
在视频监控与流媒体传输领域，视频流地址的获取与调用是极为关键的环节。视频上云网关作为一款高效且稳定的视频传输设备，为获取视频流地址提供了便捷途径，从而使外部系统或平台能够方便地进行调用。今天我们就来讨论一下如何在视频上云网关上…...
【Cesium】一、cesium简介
文章目录 前言1.什么是Cesium？2.Cesium能做什么？3.Cesium的依赖性4.Cesium学习参考 前言 本人是前端，主要是开发web，使用技术栈Vue、Js。最近因工作需要开始学习使用Cesium，找到一位博主的文章很好，一边学…...
微服务架构介绍
微服务架构是一种现代化的软件架构风格，它将应用程序构建为一组小型、自治的服务，每个服务都运行在其独立的进程中，服务与服务之间通过轻量级通信机制（通常是HTTP/RESTful API）进行通信。 1. 服务（Service&…...
SOLID-开闭原则
单一职责原则：https://blog.csdn.net/dmk877/article/details/143447010 在前面我们学习了单一职责原则，今天来一起学习一下SOLID原则中的开闭原则(Open-Closed Principle, OCP) 通过本篇博客你将学到到以下内容 ①什么是开闭原则 ②如何实现开闭原则 ③…...
Mac 安装 Flutter 提示 A network error occurred while checking
错误信息 A network error occurred while checking "https://maven.google.com/": Operation timed out原因 在中国大陆(由于访问 Google 服务器的限制导致超时),无法连接到 https://maven.google.com/ 解决方案 需要使用镜像网站 #flutter 使用国内的镜像 export …...
Rocky Linux下安装meld
背景介绍： meld是一款Linux系统下的用于 文件夹和文件的比对软件，非常常用； 故障现象： 输入安装命令后，sudo yum install meld，报错。 12-31 22:12:17 ~]$ sudo yum install meld Last metadata expirat…...
Sentinel 介绍与使用指南：构建高可用、可靠的微服务架构
在微服务架构中，服务间的依赖和调用非常复杂，这也带来了高并发、大流量等挑战。 如何确保系统在高负载情况下仍能稳定运行，如何避免某个服务的故障影响整个系统的稳定性？Sentinel，作为一个轻量级的、专为分布式系统设计…...
异步请求在TypeScript网络爬虫中的应用
异步请求的重要性 异步请求是现代网络应用中不可或缺的一部分，特别是在网络爬虫领域。它允许爬虫在等待网络响应的同时继续执行其他任务，从而提高效率和性能。在JavaScript和TypeScript中，异步请求可以通过多种方式实现，包括回调…...
智能商业分析 Quick BI
Quick BI 是阿里云提供的一款智能商业分析（BI）工具，旨在帮助企业快速获取业务洞察、优化决策过程、提升数据分析效率。通过强大的数据可视化和分析功能，Quick BI 能够帮助用户轻松连接多种数据源、创建多维度的报表和仪表盘&#…...
[算法] [leetcode-75] 颜色分类
75 颜色分类 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums ，原地 对它们进行排序，使得相同颜色的元素相邻，并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sort 函…...
抖音短视频矩阵系统源码开发技术解析
开发概览： 抖音短视频矩阵系统的构建基于一系列现代技术栈，主要包括VUE, Spring Boot和Django。本文档旨在为开发者提供关于短视频矩阵系统源代码的开发与部署指南。 技术框架分析： 前端技术选型： 对于前端界面的构建…...
Linux（CentOS）安装 MySQL
CentOS版本：CentOS 7 三种安装方式： 一、通过 yum 安装，最简单，一键安装，全程无忧。 二、通过 rpm 包安装，需具备基础概念及常规操作。 三、通过 gz 包安装，需具备配置相关操作。 --------…...
头歌实训数据结构与算法-二叉树及其应用（第9关：二叉树的顺序存储及基本操作）
任务描述 本关任务：以顺序结构存储二叉树，编写前序、中序、后序及层次顺序遍历二叉树的算法，并计算二叉树深度、所有结点总数。 相关知识 二叉树的定义 二叉树的递归定义： 二叉树或者是一棵空树。 或者是一棵由一个根结点和两…...
打印进度条
文章目录 1.Python语言实现(1)黑白色(2)彩色：蓝色 2.C语言实现(1)黑白颜色(2)彩色版：红绿色 1.Python语言实现 (1)黑白色 import sys import timedef progress_bar(percentage, width50):"""打印进度条:param percentage: 当前进度百分比…...
【LLM】Langflow 的简单使用
(PS：爆肝整理，请不要吝啬你的点赞和收藏。) 什么是 Langflow ？Langflow 是一种用于构建多智能体和RAG应用的可视化框架。它提供了个无需编码的 AI 生态系统，能够无缝集成各种常用工具和技术栈。Langflow 以 Python 为基础&#x…...
探索 DC-SDK：强大的 3D 地图开发框架
在现代 Web 开发中，地理信息系统（GIS）和 3D 地图可视化变得越来越重要。dc-sdk 是一个基于 Cesium 的开源 WebGL 地图开发框架，它提供了丰富的地图可视化功能和简单易用的 API，使开发者能够轻松地在 Web 应用中集成 3D…...
3.5mm耳机接口硬件连接
结构 以最复杂的结构为例 简单的结构无非就是没有MIC（麦克风）接口 上图的5就是Detect的作用 上面这两款产品都为3.5mm的音频插座，图一 为连接4节的音频座，而且有两个开关，1接地，2接MIC，3接左声…...
nvidia_gpu_exporter 显卡监控
导入 grafana/dashboard.json https://github.com/utkuozdemir/nvidia_gpu_exporter/blob/master/grafana/dashboard.json参考 nvidia_gpu_exporter...
聊聊 Mongod 以及 MongoDB 常用命令
Mongod mongod 是 MongoDB 数据库服务器的核心守护进程，它负责启动并管理 MongoDB 数据库实例。简单来说，mongod 是 MongoDB 数据库服务器程序，它负责处理数据存储、数据请求、数据复制等后台服务。运行 mongod 是启动 MongoDB 数据库的第一…...
webrtc 源码阅读 make_ref_counted模板函数用法
目录 1. 模板参数解析 1.1 typename T 1.2 typename... Args 1.3 typename std::enable_if::value, T>::type* nullptr 2. scoped_refptr 3. new RefCountedObject(std::forward(args)...); 4. 综合说明 5.在webrtc中的用法 5.1 peerConnectionFactory对象的构建过…...