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

js第十二题

news 来源：原创 2025/9/21 13:16:37

题十二：轮播图

要求：

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；

2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；

3.点击左右箭头可以进行左右图片的切换；

4.图片上需有介绍的文字，会随图片切换一起进行切换。

html

<body><div class="carousel"><div class="slides"><div class="slide active"><img src="./static/QQ20250120-095415.png" alt="项目1"></div><div class="slide"><img src="./js答辩/static/4034970a304e251f49011866b586c9177e3e53be - 副本.png" alt="项目2"></div><div class="slide"><img src="./js答辩/static/2025-new-year-message-cn.jpg" alt="项目3"></div></div><div class="controls"><div class="arrow prev">❮</div><div class="arrow next">❯</div></div><div class="dots"></div></div>

css

* {margin: 0;padding: 0;box-sizing: border-box;}.carousel {position: relative;width: 1000px;height: 500px;margin: 50px auto;overflow: hidden;}.slides {position: relative;height: 100%;}.slide {position: absolute;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease;}.slide.active {opacity: 1;}.slide img {width: 100%;height: 100%;object-fit: cover;}.controls {position: absolute;top: 50%;transform: translateY(-50%);width: 100%;display: flex;justify-content: space-between;padding: 0 20px;opacity: 0;transition: opacity 0.3s;}.carousel:hover .controls {opacity: 1;}.arrow {cursor: pointer;font-size: 40px;color: white;}.dots {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;}.dot {width: 15px;height: 15px;border-radius: 50%;background: rgba(255, 255, 255, 0.5);cursor: pointer;transition: background 0.3s;}.dot.active {background: white;}

   const carousel = document.querySelector('.carousel');const slides = document.querySelectorAll('.slide');const dotsContainer = document.querySelector('.dots');const prevBtn = document.querySelector('.prev');const nextBtn = document.querySelector('.next');// 初始化小圆点slides.forEach((_, index) => {const dot = document.createElement('div');dot.classList.add('dot');if (index === 0) dot.classList.add('active');dot.addEventListener('click', () => goToSlide(index));dotsContainer.appendChild(dot);});const dots = document.querySelectorAll('.dot');let currentIndex = 0;let autoPlayTimer;// 自动播放function startAutoPlay() {autoPlayTimer = setInterval(() => {nextSlide();}, 3000);}// 切换幻灯片function goToSlide(index) {slides[currentIndex].classList.remove('active');dots[currentIndex].classList.remove('active');currentIndex = (index + slides.length) % slides.length;slides[currentIndex].classList.add('active');dots[currentIndex].classList.add('active');}function nextSlide() {goToSlide(currentIndex + 1);}function prevSlide() {goToSlide(currentIndex - 1);}// 事件监听prevBtn.addEventListener('click', prevSlide);nextBtn.addEventListener('click', nextSlide);// 鼠标交互carousel.addEventListener('mouseenter', () => {clearInterval(autoPlayTimer);});carousel.addEventListener('mouseleave', startAutoPlay);// 初始化自动播放startAutoPlay();

js第十二题

题十二：轮播图要求： 1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示； 2.图片切换之后，图片中下方的小…...

编程日记 2025/9/21 13:16:37

LeetCode-76.最小覆盖子串

1、题目描述： 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串，则返回空字符串 "" 。注意： 对于 t 中重复字符，我们寻找的子字符串中该字符数量必须…...

编程日记 2025/9/15 21:08:05

CAS单点登录（第7版）20.用户界面

如有疑问，请看视频：CAS单点登录（第7版） 用户界面概述概述对 CAS 用户界面 （UI） 进行品牌化涉及编辑 CSS 样式表以及一小部分相对简单的 HTML 包含文件，也称为视图。（可选&…...

编程日记 2025/9/21 13:12:46

【强化学习的数学原理】第08课-值函数近似-笔记

学习资料：bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接：强化学习的数学原理西湖大学赵世钰文章目录一、例子：曲线拟合二、原理-目标函数介绍三、原理-优化算法和函数选择四、原理-示例与分析五、Sarsa和Q-learning六、…...

编程日记 2025/9/21 13:14:32

基于css实现正六边形的三种方案

方案一：通过旋转三个长方形生成正六边形分析： 如下图所示，我们可以通过旋转三个长方形来得到一个正六边形。疑问： 1. 长方形的宽高分别是多少？ 设正六边形的边长是100，基于一些数学常识，可以…...

编程日记 2025/9/21 13:16:37

React VS Vue

React 和 Vue 是目前最流行的两个前端框架，它们在设计理念、生态系统和开发体验上各有特点。以下是对 React 和 Vue 的全方位对比： 1. 核心设计理念 React 库而非框架：React 是一个用于构建 UI 的库，专注于视图层，其…...

编程日记 2025/9/16 5:36:24

CMake 编译工具

在使用 CMake 时，你可以通过指定工具链文件来设置编译器（如 GCC、G 或 Clang）。以下是具体步骤： 1. 创建工具链文件首先，创建一个工具链文件（例如 toolchain.cmake），并在其中指定…...

编程日记 2025/9/17 1:55:54

el-tree选中数据重组成树

vueelement-ui 实现el-tree选择重新生成一个已选中的值组成新的数据树，效果如下 <template><div class"flex"><el-tree class"tree-row" :data"list" ref"tree" :props"{children: children, label: …...

编程日记 2025/9/21 13:12:48

IO、NIO解读和不同点，以及常用的文件流操作方法

java高级——IO、NIO解读和不同点，以及常用的文件流操作方法前情提要文章介绍1. 什么是IO1.1 节点的分类1.2 传输方式 2. 七大传输方式解读2.1 File类解读2.1.1 创建文件的三种方式2.2.2 File的常用方法2.2.3 如何正确认识FileUtils 2.2 字节流（核心&am…...

编程日记 2025/9/19 14:58:23

51单片机-按键

1、独立按键 1.1、按键介绍轻触开关是一种电子开关，使用时，轻轻按开关按钮就可使开关接通，当松开手时，开关断开。 1.2、独立按键原理按键在闭合和断开时，触点会存在抖动现象。P2\P3\P1都是准双向IO口，…...

编程日记 2025/9/21 13:15:16

Spring Boot Actuator 监控✨

Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具，它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator，你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。🚀 核心知识点 &#…...

编程日记 2025/9/21 13:15:17

SpringBoot论坛网站 – 功能详解与部署教程

项目概述《SpringBoot的论坛网站》是一个基于SpringBoot框架开发的现代化论坛平台，旨在为用户提供一个便捷的交流空间。该项目不仅功能丰富，还具备良好的扩展性和易用性，适合用于学习、分享和讨论各类话题。以下是项目的核心功能模块和部署…...

编程日记 2025/9/21 13:15:04

俄罗斯方块游戏完整代码示例

以下是一个基于Cocos Creator引擎开发的俄罗斯方块游戏的完整代码示例。该游戏实现了俄罗斯方块的基本功能，并且代码整合在单个文件中，无需任何外部依赖，可以直接在浏览器中运行。 1. 创建Cocos Creator项目首先，确保你已经安装了…...

编程日记 2025/9/21 13:11:14

【设计模式】【结构型模式】组合模式（Composite）

👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 👍 欢迎点赞、收藏、关注，跟上我的更新节奏 🎵 当你的天空突…...

编程日记 2025/9/21 13:12:47

【设计模式】03-理解常见设计模式-行为型模式（专栏完结）

前言前面我们介绍完创建型模式和创建型模式，这篇介绍最后的行为型模式，也是【设计模式】专栏的最后一篇。一、概述行为型模式主要用于处理对象之间的交互和职责分配，以实现更灵活的行为和更好的协作。二、常见的行为型模式 1、观察者模…...

编程日记 2025/9/21 12:37:50

Qt 6.8版本自制windows下运行软件＜一＞——串口调试助手

自制串口调试助手哔哩哔哩效果展示一、说明本人在读学生，跟随哔哩哔哩网站北京迅为公司的教学视频，进行学习qt，由于视频中的实现过程是利用ui界面的实现，本人在学习过程中，通过完全敲代码的形式，实现同…...

编程日记 2025/9/13 1:42:41

Qt——静态函数中发送信号方法总结（不需要通过类内部信号与槽实现，关键是清楚你发送的信号源自哪个对象）

【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！《项目案例分享》《极客DIY开源分享》《嵌入式通用开发实战》《C++语言开发基础总结》《从0到1学习嵌入式Linux开发》《QT开发实战》《Android开发实战》...

编程日记 2025/9/21 5:09:46

深入解析 vLLM：高性能 LLM 服务框架的架构之美（一）原理与解析

修改内容时间2.4.1处理请求的流程，引用更好的流程图2025.02.11首发2025.02.08 深入解析 vLLM：高性能 LLM 服务框架的架构之美（一）原理与解析深入解析 vLLM：高性能 LLM 服务框架的架构之美（二）…...

编程日记 2025/9/16 0:57:10

关于视频去水印的一点尝试

一. 视频去水印的几种方法 1. 使用ffmpeg delogo滤镜 delogo 滤镜的原理是通过插值算法，用水印周围的像素填充水印的位置。示例： ffmpeg -i input.mp4 -filter_complex "[0:v]delogox420:y920:w1070:h60" output.mp4 该命令表示通过滤镜…...

编程日记 2025/9/13 1:42:36

前端常见面试题-2025

vue4.0 Vue.js 4.0 是在 2021 年 9 月发布。Vue.js 4.0 是 Vue.js 的一个重要版本，引入了许多新特性和改进，旨在提升开发者的体验和性能。以下是一些关键的更新和新特性： Composition API 重构：Vue 3 引入了 Composition API 作为…...

编程日记 2025/9/13 1:42:34

JavaEE-SpringBoot快速入门

文章目录本节目标Maven什么是Maven创建一个Maven项目maven项目功能maven的依赖管理全球仓库, 私服, 本地服务器, 配置国内镜像第一个SpringBoot项目创建项目运行SpringBoot程序 SpringBoot原理初步Web服务器总结本节目标了解什么是maven, 配置国内源使用Springboot创建项…...

编程日记 2025/9/21 6:57:49

盛铂科技 SMF106 低相位噪声贴片式频率综合器模块

在现代通信和电子设备领域，频率综合器作为关键组件，其性能优劣直接影响系统的整体表现。盛铂科技的 SMF106 低相位噪声贴片式频率综合器，以其卓越的性能和独特设计，成为众多高性能系统的选择。一、频率覆盖范围广，步进…...

编程日记 2025/9/13 4:15:07

前端【技术方案】重构项目

1. 明确重构目标优化性能减少页面加载时间降低资源占用提升代码可维护性更规范的代码风格更清晰的代码结构更明确的模块设计扩展功能为项目添加新功能改进现有功能 2. 评估项目现状审查代码全面检查现有代码，找出代码中的问题，如代码冗余、耦合…...

编程日记 2025/9/15 21:53:23

第十六天 HarmonyOS WebView开发实战：从加载网页到与JavaScript交互

HarmonyOS WebView开发实战：从加载网页到与JavaScript交互一、WebView基础与HarmonyOS特性解析在移动应用开发中，WebView作为内嵌浏览器组件，在HarmonyOS（鸿蒙系统）中扮演着重要角色。它不仅能够加载本地和远程网页…...

编程日记 2025/9/13 4:15:04

Unity学习part2

为bilibili教程【【Unity教程】零基础带你从小白到超神】 https://www.bilibili.com/video/BV1gQ4y1e7SS/?p50&share_sourcecopy_web&vd_source6e7a3cbb802eb986578ad26fae1eeaab的笔记 1、灯光的使用定向光模拟太阳，是平行光。旋转定向光，光…...

编程日记 2025/9/19 3:21:45

贪吃蛇游戏

贪吃蛇一、html <div class"container" id"app"></div><script src"./js/index.js"></script>二、css * {margin: 0;top: 0;} .set {margin: 15px auto;width: 600px; } .container {width: 600px;height: 600px;bac…...

编程日记 2025/9/21 2:18:27

docker修改镜像默认存储路径（基于 WSL2 的迁移方法）

打开powershell窗口任意地方shift右键 1、停止 WSL wsl --shutdown2、导出数据 wsl --export docker-desktop-data E:\docker\DockerDesktopdata\docker-desktop-data.tar wsl --export docker-desktop E:\docker\DockerDesktop\docker-desktop.tar3、取消注册 wsl --un…...

编程日记 2025/9/20 12:52:42

C#+SqlSugar实现主从库读写分离

在使用 **SqlSugar** 进行分库操作时，可以通过配置多个数据库连接，并根据业务逻辑动态切换数据库。以下是一个完整的分库示例，展示如何实现分库功能。 --- ### **1. 安装 NuGet 包** 安装 SqlSugarCore： bash dotnet add packag…...

编程日记 2025/9/20 1:23:58

从无序到有序：上北智信通过深度数据分析改善会议室资源配置

当前企业普遍面临会议室资源管理难题，预约机制不完善和临时会议多导致资源调度不合理，既有空置又有过度拥挤现象。针对上述问题，上北智信采用了专业数据分析手段，巧妙融合楼层平面图、环形图、折线图和柱形图等多种可视化工具&a…...

编程日记 2025/9/19 23:15:26

以太网详解（八）传输层协议：TCP/UDP 协议

文章目录传输层协议概述为什么需要传输层？传输层功能网络层与传输层在实现 “端到端” 传输的异同两类服务:面向连接/无连接服务传输控制协议 TCPTCP 协议数据单元格式TCP 的重传机制快重传和快恢复快重传举例快恢复算法用户数据报协议 UDPUDP 概述UDP 基本工作过…...

编程日记 2025/9/20 13:15:06

CentOS 8 配置bond

CentOS 8 网络配置的详细步骤和对应的配置文件内容。 1. 配置聚合网卡（Bonding）配置intranet聚合网卡在/etc/sysconfig/network-scripts/目录下创建ifcfg-intranet文件，内容如下： TYPE=Bond NAME=intranet DEVICE=intranet ONBOOT=yes BOOTPROTO=none IPADDR=10.2.1.22…...

编程日记 2025/9/21 4:12:51

C语言基础16：二维数组、字符数组

二维数组定义二维数组本质上是一个行列式的组合，也就是说二维数组由行和列两部分组成。属于多维数组，二维数组数据是通过行列进行解读。二维数组可被视为一个特殊的一维数组，相当于二维数组又是一个一维数组，只不过它的元素…...

编程日记 2025/9/19 10:46:08

Java 同步锁性能的最佳实践：从理论到实践的完整指南

目录一、同步锁性能分析 （一）性能验证说明 1. 使用同步锁的代码示例 2. 不使用同步锁的代码示例 3. 结果与讨论 （二）案例初步优化分析说明 1. 使用AtomicInteger原子类尝试优化分析 2. 对AtomicInteger原子类进一步优化 …...

编程日记 2025/9/21 5:19:27

思科、华为、H3C常用命令对照表

取消/关闭思科no华为undo华三undo 查看思科show华为display华三display 退出思科exit华为quit华三quit 设备命名思科hostname华为sysname华三sysname 进入全局模式思科enable、config terminal华为system-view华三system-view 删除文件思科delete华为delete华…...

编程日记 2025/9/20 14:23:34

[qt5学习笔记]Application Example示例程序源码解析

开发环境问题 vs2022下直接打开ui、ts文件失败解决办法如下图， 设置designer独立运行。估计是嵌入运行存在些许bug。同理，ts编辑工具linguist也存在这个问题。 qrc rc的编辑嵌入编辑都正常，但分离式更稳定可靠。 qt creator编译失败原…...

编程日记 2025/9/20 5:49:11

华为交换机堆叠技术简介配置

目录一、华为堆叠技术简介（一）提高可靠性（二）扩展端口数量（三）增大带宽（四）简化组网（五）长距离堆叠二、华为交换机堆叠技术的案例及命令配置（一…...

编程日记 2025/9/20 3:13:39

腿足机器人之四- 卡尔曼滤波

腿足机器人之四卡尔曼滤波概率学基础贝叶斯准则熵卡尔曼滤波扩展卡尔曼滤波信息滤波器在机器人（四足、人形）领域，感知和行动的不确定性可能由多种因素引起，如传感器噪声、外部环境的变化、非精确控制以及实时性算力限制等。和…...

编程日记 2025/9/13 4:14:41

nginx 部署前端vue项目

👨‍⚕ 主页： gis分享者 👨‍⚕ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕ 收录于专栏：前端工程师文章目录一、🍓什么是nginx？二、🍓nginx 部署…...

编程日记 2025/9/19 13:11:18

【第1章：深度学习概览——1.6 深度学习框架简介与选择建议】

嘿，各位老铁们，今天咱们来一场深度学习框架的深度探索之旅。在这个充满无限可能的深度学习时代，深度学习框架就像是连接理论与实践的桥梁，帮助我们从算法设计走向实际应用。随着技术的飞速发展，深度学习框架的选择变得越来越多样化，每一种框架都有其独特的优势和适用场景…...

编程日记 2025/9/13 4:14:38

NLLB 与 ChatGPT 双向优化：探索翻译模型与语言模型在小语种应用的融合策略

作者：来自 vivo 互联网算法团队- Huang Minghui 本文探讨了 NLLB 翻译模型与 ChatGPT 在小语种应用中的双向优化策略。首先介绍了 NLLB-200 的背景、数据、分词器和模型，以及其与 LLM（Large Language Model）的异同和协同关系。接着…...

编程日记 2025/9/18 17:10:41

C#的委托delegate与事件event

在C#中，delegate（委托）和 event（事件）是两个非常重要的概念，它们主要用于实现回调机制和事件驱动编程。下面详细介绍它们的原理和使用场景。 1. Delegate（委托） 1.1 委托的原理委托…...

编程日记 2025/9/20 10:33:53

Spring Boot 集成MyBatis-Plus

文章目录一、背景说明二、集成过程 2.1 引入 maven 依赖2.2 增加属性配置2.3 自动配置类三、验证集成 3.1 控制器3.2 服务类3.3 Mapper接口类3.4 实体类3.4 不要忘记XML文件3.5 发起请求四、技巧拓展 4.1 如何打印sql语句？4.2 如何对参数增加非空验证&#xff1f…...

编程日记 2025/9/21 11:24:47

javacv将视频切分为m3u8视频并播放

学习链接 ffmpeg-demo 当前对应的 gitee代码 Spring boot视频播放(解决MP4大文件无法播放)，整合ffmpeg,用m3u8切片播放。 springboot 通过javaCV 实现mp4转m3u8 上传oss 如何保护会员或付费视频？优酷是怎么做的？ - HLS 流媒体加密 ffmpe…...

编程日记 2025/9/20 14:09:11

Docker 入门与实战：从安装到容器管理的完整指南

🚀 Docker 入门与实战：从安装到容器管理的完整指南 🌟 📖 简介在现代软件开发中，容器化技术已经成为不可或缺的一部分。而 Docker 作为容器化领域的领头羊，以其轻量级、高效和跨平台的特性，深…...

编程日记 2025/9/19 23:15:28

计算机视觉：卷积神经网络(CNN)基本概念(二)

第一章：计算机视觉中图像的基础认知第二章：计算机视觉：卷积神经网络(CNN)基本概念(一) 第三章：计算机视觉：卷积神经网络(CNN)基本概念(二) 第四章：搭建一个经典的LeNet5神经网络接上一篇《计算机视觉&am…...

编程日记 2025/9/20 12:29:32

SQL SERVER的PARTITION BY应用场景

SQL SERVER的PARTITION BY关键字说明介绍 PARTITION BY关键字介绍具体使用场景排名计算累计求和分组求最值分组内百分比计算分组内移动平均计算分组内数据分布统计分组内数据偏移计算总结 PARTITION BY关键字介绍在SQL SERVER中，关键字PARTITION BY主要用于窗口函…...

编程日记 2025/9/21 6:37:59

【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第十二节】

ISO 14229-1:2023 UDS诊断服务测试用例全解析（TesterPresent_0x3E服务） 作者：车端域控测试工程师更新日期：2025年02月14日关键词：UDS协议、0x3E服务、会话保持、ISO 14229-1:2023、ECU测试一、服务功能概述 0x3E服…...

编程日记 2025/9/18 23:03:26

gsoap实现webservice服务

gsoap实现webservice服务在实现Web服务时，使用gSOAP是一个很好的选择，因为它提供了强大的工具和库来创建SOAP和RESTful服务。gSOAP是一个C和C语言开发的库，它支持SOAP协议的各种版本，包括SOAP 1.1和SOAP 1.2。下面是如何使用gSO…...

编程日记 2025/9/21 12:20:43

达梦：dmserver占用io高排查

目录标题 1. 使用达梦数据库的性能视图查询当前活动会话查询执行时间较长的 SQL 2. 使用 DM 性能监视工具3. 使用操作系统工具监控 I/Oiostat 工具dstat 工具 4. 优化查询和索引审查 SQL 执行计划优化索引 5. 调整数据库参数6. 分析数据库日志7. 硬件和存储检查总结针对达梦数…...

编程日记 2025/9/21 11:11:29

MoE架构中的专家选择门控机制：稀疏激活如何实现百倍效率突破？

技术原理（数学公式与核心逻辑） 核心公式门控网络输出： G ( x ) Softmax ( W g ⋅ x b g ) G(x) \text{Softmax}(W_g \cdot x b_g) G(x)Softmax(Wg⋅xbg) 最终输出： y ∑ i 1 n G i ( x ) ⋅ E i ( x ) (仅保留Top-…...

编程日记 2025/9/16 21:40:10

相关文章：