当前位置：首页 > news >正文

HTMLCSS实现网页轮播图

news 来源：原创 2025/7/31 23:43:22

网页中轮播图区域的实现与解析

在现代网页设计中，轮播图是一种常见且实用的元素，能够在有限的空间内展示多个内容，吸引用户的注意力。下面将对上述代码中轮播图区域的实现方式进行详细介绍。

一、HTML 结构

<div class="carousel-container"><div class="carousel-wrapper"><div class="carousel-slide"><img src="../png/11430bae6b4173b44543952bb77f24f358e7.jpg" alt=""></div><div class="carousel-slide"><img src="../png/114317272555415270.jpg" alt=""></div><div class="carousel-slide"><img src="../png/11436d56a814d335440688225557ba55ea8d.jpg" alt=""></div><div class="carousel-slide"><img src="../png/114390d3e946f0bf4e95ae287e007efc8d45.jpg" alt=""></div><div class="carousel-slide"><img src="../png/1143a889c2a96a1a4dbdbbba1037a5eac487.jpg" alt=""></div><div class="carousel-slide"><img src="../png/1143daf6b582954042b8801ae2564c19d398.jpg" alt=""></div><!-- 复制第一张图片实现无缝循环 --><div class="carousel-slide"><img src="../png/1143ea648b5f242f4fe8a399cb5f741366bf.jpg" alt=""></div></div>
</div>
<div class="carousel-indicators"><!-- 静态指示器内容容器 --><div class="indicator-content"></div><!-- 导航圆点 --><span class="current" data-index="0"></span><span data-index="1"></span><span data-index="2"></span><span data-index="3"></span><span data-index="4"></span><span data-index="5"></span>
</div>

.carousel-container：这是轮播图的最外层容器，用于包裹整个轮播图内容。它设置了 position: absolute，通过 top 和 left 属性确定在页面中的位置，同时设置了宽度、高度、overflow: hidden 等属性，确保轮播图超出容器部分被隐藏。
.carousel-wrapper：该容器用于包含所有的轮播图幻灯片（.carousel-slide），使用 display: flex 布局，使得幻灯片可以水平排列。通过修改其 transform 属性来实现幻灯片的滚动切换。
.carousel-slide：每个幻灯片是一个包含图片的 div 元素，通过设置 min-width: 100% 和 height: 100% 使其填满轮播图容器的宽度和高度，图片通过 object-fit: cover 确保在容器内完整显示且不失真。
.carousel-indicators：这是轮播图的指示器容器，包含了用于指示当前幻灯片位置的导航圆点（span 元素）。通过不同的类名（如 current）来表示当前激活的幻灯片。

二、CSS 样式

轮播图的样式主要通过 CSS 来实现，相关样式如下：

.carousel-container {position: absolute;z-index: 9;top: -610px;left: -390px;width: 720px;height: 380px;margin: -60px auto 0;overflow: hidden;position: relative;border: 9px solid #fff;
}
.carousel-wrapper {display: flex;width: 100%;height: 100%;transition: transform 0.5s ease;
}
.carousel-slide {min-width: 100%;height: 100%;
}
.carousel-slide img {width: 100%;height: 100%;object-fit: cover;
}
.carousel-indicators {position: absolute;z-index: 100;top: 840px;left: 1100px;transform: translateX(-50%);display: flex;gap: 15px;
}
.carousel-indicators span {width: 70px;height: 15px;background-color: #1f1f1f;border: 2px solid #fff;border-radius: 1px;cursor: pointer;transition: all 0.3s ease;
}
.carousel-indicators span.current {background-color: #ebebeb;transform: scale(1.2);
}
.carousel-indicators span:hover {background-color: rgba(0, 255, 255, 0.7);
}

.carousel-container：设置了绝对定位、z-index、尺寸、边框等样式，通过 overflow: hidden 隐藏超出容器的幻灯片部分。
.carousel-wrapper：使用 display: flex 布局，并设置了过渡效果（transition），使得幻灯片切换时具有平滑的动画效果。
.carousel-slide 和 .carousel-slide img：确保幻灯片和其中的图片能够正确填充轮播图容器。
.carousel-indicators：设置了指示器的位置、布局方式（display: flex）以及圆点之间的间距（gap）。
.carousel-indicators span：定义了导航圆点的样式，包括尺寸、背景颜色、边框、圆角以及过渡效果。
.carousel-indicators span.current：当某个圆点表示当前幻灯片时，应用不同的样式（如背景颜色和缩放效果）以突出显示。
.carousel-indicators span:hover：设置鼠标悬停在圆点上时的样式变化，增加交互性。

三、JavaScript 交互

通过 JavaScript 代码实现了轮播图的自动播放、手动切换以及指示器的更新等功能，相关代码如下：

// 获取DOM元素
const carouselWrapper = document.querySelector('.carousel-wrapper');
const slides = document.querySelectorAll('.carousel-slide');
const prevBtn = document.querySelector('.qin7');
const nextBtn = document.querySelector('.qin17');
const indicators = document.querySelectorAll('.carousel-indicators span');
const carouselContainer = document.querySelector('.carousel-container');// 初始化变量
let currentIndex = 0;
let timer;// 更新轮播图位置和指示器
function updateCarousel() {// 更新轮播图位置carouselWrapper.style.transform = `translateX(${-currentIndex * slides[0].offsetWidth}px)`;// 更新指示器状态indicators.forEach((indicator, index) => {indicator.classList.toggle('current', index === currentIndex % 6);});
}// 下一张
function nextSlide() {currentIndex++;carouselWrapper.style.transition = 'transform 0.5s ease';// 检查是否到达最后一张（克隆的第一张）if (currentIndex >= slides.length - 1) {setTimeout(() => {carouselWrapper.style.transition = 'none';currentIndex = 0;updateCarousel();}, 500);}updateCarousel();
}// 上一张
function prevSlide() {currentIndex--;carouselWrapper.style.transition = 'transform 0.5s ease';// 检查是否到达第一张（克隆的最后一张）if (currentIndex < 0) {setTimeout(() => {carouselWrapper.style.transition = 'none';currentIndex = slides.length - 2;updateCarousel();}, 500);}updateCarousel();
}// 自动轮播
function startAutoPlay() {timer = setInterval(nextSlide, 3000);
}// 停止自动轮播
function stopAutoPlay() {clearInterval(timer);
}// 初始化轮播图
function initCarousel() {// 绑定事件nextBtn.addEventListener('click', nextSlide);prevBtn.addEventListener('click', prevSlide);indicators.forEach(indicator => {indicator.addEventListener('click', () => {currentIndex = parseInt(indicator.dataset.index);carouselWrapper.style.transition = 'transform 0.5s ease';updateCarousel();});});// 鼠标悬停暂停carouselContainer.addEventListener('mouseenter', stopAutoPlay);carouselContainer.addEventListener('mouseleave', startAutoPlay);// 开始自动轮播startAutoPlay();// 初始化显示updateCarousel();
}// 页面加载完成后初始化轮播图
document.addEventListener('DOMContentLoaded', initCarousel);

获取 DOM 元素：通过 document.querySelector 和 document.querySelectorAll 获取轮播图相关的 DOM 元素，如轮播图容器、幻灯片、导航按钮和指示器。
初始化变量：定义了 currentIndex 用于记录当前幻灯片的索引，timer 用于存储自动播放的定时器。
updateCarousel 函数：用于更新轮播图的位置和指示器的状态，通过修改 carouselWrapper 的 transform 属性来移动幻灯片，并根据 currentIndex 更新指示器的样式。
nextSlide 和 prevSlide 函数：分别实现了切换到下一张和上一张幻灯片的功能，同时处理了无缝循环的逻辑，当到达最后一张或第一张时，通过设置过渡效果和延迟来实现平滑的循环切换。
startAutoPlay 和 stopAutoPlay 函数：用于启动和停止自动播放，通过 setInterval 和 clearInterval 来控制定时器。
initCarousel 函数：初始化轮播图的功能，包括绑定导航按钮和指示器的点击事件、设置鼠标悬停暂停自动播放的功能，并启动自动播放和初始化显示。
页面加载完成后初始化：通过 document.addEventListener('DOMContentLoaded', initCarousel); 在页面加载完成后调用 initCarousel 函数，确保轮播图能够正常工作。

通过以上 HTML、CSS 和 JavaScript 的结合，实现了一个具有自动播放、手动切换和指示器功能的轮播图区域，为网页增添了动态和交互性的展示效果。

效果展示

编辑

在代码中添加轮播图的指示点

轮播图区域的代码中如何实现自动播放？

怎样在轮播图区域添加鼠标点击事件？

HTMLCSS实现网页轮播图

网页中轮播图区域的实现与解析在现代网页设计中，轮播图是一种常见且实用的元素，能够在有限的空间内展示多个内容，吸引用户的注意力。下面将对上述代码中轮播图区域的实现方式进行详细介绍。一、HTML 结构 <div class"carousel-c…...

编程日记 2025/7/31 23:43:22

HTML表单与数据验证设计

HTML 表单与数据验证设计：构建可靠的用户数据采集系统引言互联网的核心是数据交互，而HTML表单是这一交互的主要入口。作为前端工程师，设计高质量的表单不仅关乎用户体验，更直接影响数据收集的准确性和系统安全。在我的学习实…...

编程日记 2025/7/29 7:33:44

[Windows] 星光桌面精灵 V0.5

[Windows] 星光桌面精灵链接：https://pan.xunlei.com/s/VOOI9NCNDB0iBONt5gz7zUb9A1?pwdgxa6# [Windows] 星光桌面精灵 V0.5 这款桌面精灵是动态的，而且还可以做快捷启动...

编程日记 2025/7/31 23:42:14

Java 网络编程性能优化：高吞吐量的实现方法

Java 网络编程性能优化：高吞吐量的实现方法在当今的互联网时代，网络应用的性能优化是开发人员面临的重要挑战之一。Java 作为一门广泛使用的编程语言，提供了强大的网络编程支持，但如何通过优化实现高吞吐量，是每个 J…...

编程日记 2025/7/31 23:37:32

【去哪儿网】登录滑块逆向算法AES加密分析（逆天滑块轨迹）

目标：aHR0cHM6Ly91c2VyLnF1bmFyLmNvbS9wYXNzcG9ydC9sb2dpbi5qc3A 验证接口： https://vercode.qunar.com/inner/captcha/snapshot 可以发现是encryption方法生成，进入encryption里面，发现是AES加密的轨迹 track就是轨迹直接…...

编程日记 2025/7/31 23:43:19

Redis ④-通用命令

Redis 是一个客户端-服务器结构的程序，这与 MySQL 是类似的，这点需要牢记！！！ Redis 固然好，但也不是任何场景都适合使用 Redis，一定要根据当前的业务需求来选择是否使用 Redis Redis 通用命令…...

编程日记 2025/7/31 23:40:39

机制的作用

“机制”是一个广泛使用的概念，其含义和应用范围因领域而异。在不同的学科和实际应用中，机制有着不同的定义和功能。以下从几个主要领域对“机制”进行详细解释： 一、自然科学中的机制 （一）物理学定义在物理学中&…...

编程日记 2025/7/31 23:37:31

Pandas：数据处理与分析的核心操作

Pandas：数据处理与分析的核心操作 Pandas 是 Python 数据分析的核心库，它提供了高性能、易用的数据结构和数据分析工具。本文将详细介绍 Pandas 的核心操作，帮助你高效进行数据处理和分析。 1. Pandas 基础数据结构 Pandas 有两个主要的数…...

编程日记 2025/7/30 9:05:01

Kotlin实现Android应用保活方案

Kotlin实现Android应用保活优化方案以下的Android应用保活实现方案，更加符合现代Android开发规范，同时平衡系统限制和用户体验。 1. 前台服务方案 class OptimizedForegroundService : Service() {private val notificationId 1private val channel…...

编程日记 2025/7/31 23:37:57

硬件电路(25)-过温保护器件ksd9700温控开关

一、概述 KSD9700系列温控开关是一种双金属作为感温元件的温控器，具有动作迅速、控温精确、控制电流大、使用寿命长的特点，被广泛应用于各类微型电机、电磁炉、空调电机、小家电等做温度保护控制。二、应用 KSD9700系列产品是一种双金属作为感温元件的…...

编程日记 2025/7/31 23:42:47

vuex实现同一页面radio-group点击不同按钮显示不同表单

本文实现的是点击单一规格和多规格两个按钮会在页面显示不同的表单方法一  <el-form label-width"80px" class"text-align-left"><el-form-item label"商品规格"><!-- 监听skus_type的改…...

编程日记 2025/7/28 8:13:01

代码随想录训练营第36天 ||1049. 最后一块石头的重量 II 494. 目标和 474. 一和零

1049. 最后一块石头的重量 II 讲解：代码随想录思路： 01背包问题：题意说要求粉碎石头后留下的最小石头重量，石头粉碎的规则是两个石头如果重量相等，同时粉碎，如果重量不相等，粉碎后的重量是大…...

编程日记 2025/7/31 23:42:45

[Spring]SSM整合

第一步整合任何框架，首先都是导入相关的jar包： <dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.3.18</version></dependency><!--mybatis依…...

编程日记 2025/7/31 6:55:11

【HDFS】HDFS数据迁移与备份全攻略：从日常备份到灾难恢复

目录 1 HDFS数据迁移与备份概述 2 集群间数据迁移：DistCp工具详解 2.1 DistCp工作原理架构 2.2 DistCp标准工作流程 2.3 DistCp性能优化方案 3 离线备份实施策略 3.1 HDFS到本地备份架构 4 灾难恢复方案设计 4.1 基于快照的恢复流程 4.2 数据一致性校验方…...

编程日记 2025/7/30 21:19:13

动态规划入门：背包问题求具体方案（以0-1背包问题为例）

本质：有向图最短（长）路问题字典序最小方案？--贪心思路？（本题未使用） 分析第一个物品： 写代码时tip：要考虑“边读边做”还是“先读后做” #include<iostream> #i…...

编程日记 2025/7/27 17:09:01

git学习日志

你看到的是 Vim 文本编辑器的界面，并非 git 的窗口。这是你通过 vim hello.txt 命令打开的新文件。以下是分步操作指南： 1. 进入编辑模式按下键盘上的 i 键（进入 “INSERT” 模式），此时左下角会显示 -- INSERT --。现…...

编程日记 2025/7/30 23:09:36

数字孪生废气处理工艺流程

图扑数字孪生废气处理工艺流程系统。通过精准 3D 建模，对废气收集、预处理、净化、排放等全流程进行 1:1 数字化复刻，实时呈现设备运行参数、污染物浓度变化等关键数据。借助图扑可视化界面，管理者可直观掌握废气处理各环节状态&#xff0c…...

编程日记 2025/7/30 13:59:55

iPhone 13P 换超容电池，一年实记的“电池循环次数-容量“柱状图

继上一篇 iPhone 13P 更换"移植电芯"和"超容电池"🔋体验，详细记录了如何更换这两种电池，以及各自的优略势对比。一晃一年过去，时间真快，这次分享下记录了使用超容电池的 “循环次数 - 容量(mAh)…...

编程日记 2025/7/30 5:13:58

豆瓣图书数据采集与可视化分析（二）- 豆瓣图书数据清洗与处理

文章目录前言一、查看数据基本信息二、拆分pub列三、日期列处理四、价格列处理五、出版社列处理六、评价人数列处理七、缺失值处理八、重复数据处理九、异常值处理十、完整代码十一、清洗与处理后的数据集展示前言豆瓣作为国内知名的文化社区，拥有庞大且丰富的图…...

编程日记 2025/7/28 8:12:45

【Sa-Token】学习笔记05 - 踢人下线源码解析

目录前言强制注销踢人下线源码解析前言所谓踢人下线，核心操作就是找到指定 loginId 对应的 Token，并设置其失效。上图为踢人下线后，前端应该用图像给出来让用户重新登录，而不是让前端收到一个描述着被下线的JSON 强…...

编程日记 2025/7/28 20:39:10

Linux | I.MX6ULL 文件系统

01 本节所有的测试程序需要开发板有 Qt 环境来运行。我们提供的文件系统是由 yocto 裁剪整理得来的。之后我们会整理一份单独移植的 qt 系统。方便用户移植第三方软件。如果用户的文件系统非我们的出厂版本，请参考之前烧写章节重新烧写出厂文件系统。开发板启动需要输入登录…...

编程日记 2025/7/31 13:56:45

Python3基础语法

一：注释 Python中用#表示单行注释，#之后的同行的内容都会被注释掉。使用三个连续的双引号表示多行注释，两个多行注释标识之间内容会被视作是注释。二：基础变量类型与操作符 1. 除法 * 除法 / python3中就算是两个整数相除&a…...

编程日记 2025/7/29 10:52:31

QEMU源码全解析 —— 块设备虚拟化（20）

接前一篇文章：QEMU源码全解析 —— 块设备虚拟化（19）本文内容参考：《趣谈Linux操作系统》 —— 刘超，极客时间《QEMU/KVM源码解析与应用》 —— 李强，机械工业出版社特此致谢！上一回大致解析了drive_new函数，本回重点对于drive_new函数中调用的blockdev_init函…...

编程日记 2025/7/31 16:17:47

JavaScript 笔记 --- part 4 --- Web API (part 2)

(webAPI part2) DOM 基本操作事件流定义: 指的是事件完整执行过程中的流动路径捕获阶段: 事件从最外层的窗口对象开始，逐层向内传播到目标元素，并触发相应的事件处理程序。冒泡阶段: 事件从目标元素开始，逐层向外传播到最外层的窗口对象…...

编程日记 2025/7/27 14:41:19

从入门到精通汇编语言第六章（中断及外部设备操作）

参考教程：通俗易懂的汇编语言（王爽老师的书）_哔哩哔哩_bilibili 一、移位指令 1、8个移位指令 （1）逻辑左移指令SHL：SHL OPR, CNT。 ①OPR为操作数，CNT为左移位数，该指令将OPR视作…...

编程日记 2025/7/31 5:53:09

PySide6 GUI 学习笔记——常用类及控件使用方法（常用类尺寸QSizeF）

QSizeF 类（浮点尺寸类） 文章目录 QSizeF 类（浮点尺寸类）概述主要方法列表详细说明及应用举例注意事项概述 QSizeF 类使用浮点精度定义二维对象的尺寸。官方文档在这里。主要方法列表 __init__(self) …...

编程日记 2025/7/30 9:44:30

操作系统中的虚拟化技术深度对话

操作系统中的虚拟化技术深度对话参与者：系统工程师（Engineer）、开发者（Developer）、学生（Student） 1. 虚拟化的基本概念 Student：虚拟化到底是什么？为什么操作系统需要…...

编程日记 2025/7/28 8:12:29

第35讲：构建属于自己的遥感大模型平台，并接入地理数据工作流

目录 🌍 写在前面一、为什么要构建属于自己的遥感大模型平台？二、核心技术选型推荐 ✅ 前端部分 ✅ 后端部分 ✅ 部署平台三、平台架构设计思路四、案例实战：构建一个在线遥感分割平台 📌 第一步：模型服务封装（FastAPI） 📌 第二步：前端上传与展示（L…...

编程日记 2025/7/29 12:04:30

langchain-nextjs-template 模板安装与配置

前提条件： node安装yarn 安装：npm install -g yarn 目录 1. 克隆项目2. 安装依赖3. 配置环境变量4. 修改模型配置5. 启动开发服务器6. 项目结构说明7. 功能说明8. 自定义提示模板部分过程文件截图 1. 克隆项目首先，从 GitHub 克隆 LangCha…...

编程日记 2025/7/28 8:12:25

安卓单机斗地主,具备休闲挑战等多模式

软件介绍斗地主单机版是一款超适合在安卓设备上玩的游戏。当你周末玩网游玩累了的时候，它就是个很不错的选择哦。多种模式可选这个斗地主单机版有不同的模式呢，有休闲模式、挑战模式、炸弹场和大师赛。你可以根据自己的喜好随意挑选模式&#xff0c…...

编程日记 2025/7/28 8:12:23

电解电容失效分析过程、失效分析报告

参考： 深度剖析关键电子元器件电解电容内部故障隐患电解电容的参数指标电路板中电解电容是存在寿命的，电解电容中的电解液随着时间会慢慢减少导致电容容值降低，最终导致电源出现问题。相信大家都见过电解电容鼓包的情况。所以做设计的时…...

编程日记 2025/7/28 8:12:21

Ubuntu修改Swap交换空间大小

前言： 安装Ubuntu系统时，选择了默认空间分配方案，Swap空间仅1G，而实际的物理内存有32G，分给Swap空间至少为内存的1倍，最好是内存值的2倍，系统相当卡顿，重做系统后，费力部…...

编程日记 2025/7/30 1:20:02

SpringBoot 知识图谱

预警：本文非常长，建议先 mark 后看，也许是最后一次写这么长的文章说明：前面有 4 个小节关于 Spring 的基础知识，分别是：IOC 容器、JavaConfig、事件监听、SpringFactoriesLoader 详解，它们占据了本文的大部分内容，虽然它们之间可能没有太多的联系，但这些知识对于理解 …...

编程日记 2025/7/28 8:12:17

智谱开源新一代GLM模型，全面布局AI智能体生态

2024年4月15日，智谱在中关村论坛上正式发布了全球首个集深度研究与实际操作能力于一体的AI智能体——AutoGLM沉思。这一革命性技术的发布标志着智谱在AGI（通用人工智能）领域的又一次重要突破。智谱的最新模型不仅推动了AI智能体技术的升级&am…...

编程日记 2025/7/28 2:19:13

一文读懂Python之numpy模块（34）

一、模块简介 numpy是Python语言中做科学计算的基础库，重在于数值计算，有一个强大的N维数组对象Array，同时NumPy 提供了大量的库函数和操作，可以帮助程序员轻松地进行Array数值计算。 numpy在数据分析和机器学习领域被广泛使用。…...

编程日记 2025/7/31 8:30:17

Lora 微调自定义device_map

Lora 微调自定义device_map 首先查看模型权重参数配置model.safetensors.index.json 查看多少解码器这里的layer可以理解为解码器层，后面有qkv，bais，layernomal等 # 显卡数量 num_gpus = 5 # 总层数 num_layers = 28layers_per_gpu = num_layers // num...

编程日记 2025/7/28 8:12:12

二叉树的顺序结构及实现

一.二叉树的顺序结构二.堆的概念及结构三.堆的实现一.二叉树的顺序结构普通的二叉树是不适合用数组来存储的，因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结构存储。现实中我们通常把堆 ( 一种二叉树 ) 使用顺序结构的数组来存储。二.堆的概念…...

编程日记 2025/7/30 16:16:36

python生成项目依赖文件requirements.txt

文章目录通过pip freeze去生成通过pipreqs去生成通过pip freeze去生成 pip freeze > requirements.txt会将整个python的Interceptor的环境下lib包下所有的依赖都生成到这个文件当中，取决于我们使用的python的版本下所有的安装包。不建议使用这种方式&#xff…...

编程日记 2025/7/28 8:12:08

Cribl 对Windows-xml log 进行 -flatten-03

The Flatten Function Description The Flatten Function is used to flatten fields out of a nested structure. Lets flatten the _raw JSON object, to further reduce the events size before we send it to the intended destination(s). Steps – Adding a Flatten…...

编程日记 2025/7/28 8:12:06

网页中轮播图区域的实现与解析

一、HTML 结构

二、CSS 样式

三、JavaScript 交互

相关文章：