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

html+js 轮播图

news 来源：原创 2025/8/28 20:28:25

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图示例</title><style>/* 基本样式 */body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;font-family: Arial, sans-serif;}/* 轮播图容器 */.carousel {width: 600px;height: 400px;position: relative;overflow: hidden;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}/* 图片容器 */.carousel-images {display: flex;width: 100%;height: 100%;transition: transform 0.5s ease-in-out;}/* 图片样式 */.carousel-images img {width: 100%;height: 100%;object-fit: cover;flex-shrink: 0;}/* 左右按钮 */.carousel-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer;font-size: 18px;border-radius: 50%;transition: background-color 0.3s ease;}.carousel-button:hover {background-color: rgba(0, 0, 0, 0.8);}/* 左按钮 */.carousel-button.prev {left: 10px;}/* 右按钮 */.carousel-button.next {right: 10px;}/* 指示器容器 */.carousel-indicators {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;gap: 5px;}/* 指示器样式 */.carousel-indicators span {width: 10px;height: 10px;background-color: rgba(255, 255, 255, 0.5);border-radius: 50%;cursor: pointer;transition: background-color 0.3s ease;}.carousel-indicators span.active {background-color: white;}</style>
</head>
<body><!-- 轮播图容器 --><div class="carousel"><!-- 图片容器 --><div class="carousel-images"><img src="https://image.meiye.art/pic_1631411429199mjIE7yxqjZxWNdOvWLxL2?imageMogr2/thumbnail/640x/interlace/1" alt="Image 1"><img src="https://image.meiye.art/pic_16324946992753vSLEv0P2s-1PY95ynOZn?imageMogr2/thumbnail/640x/interlace/1" alt="Image 2"><img src="https://image.meiye.art/pic_1628403749737?imageMogr2/thumbnail/640x/interlace/1" alt="Image 3"></div><!-- 左右按钮 --><button class="carousel-button prev">&lt;</button><button class="carousel-button next">&gt;</button><!-- 指示器 --><div class="carousel-indicators"><span class="active"></span><span></span><span></span></div></div><script>// 获取元素const carouselImages = document.querySelector('.carousel-images');const prevButton = document.querySelector('.carousel-button.prev');const nextButton = document.querySelector('.carousel-button.next');const indicators = document.querySelectorAll('.carousel-indicators span');let currentIndex = 0; // 当前显示的图片索引const totalImages = carouselImages.children.length; // 图片总数// 更新指示器状态function updateIndicators() {indicators.forEach((indicator, index) => {indicator.classList.toggle('active', index === currentIndex);});}// 切换到指定图片function goToImage(index) {if (index < 0) {index = totalImages - 1; // 如果小于0，切换到最后一张} else if (index >= totalImages) {index = 0; // 如果超出范围，切换到第一张}currentIndex = index;carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;updateIndicators();}// 切换到上一张图片prevButton.addEventListener('click', () => {goToImage(currentIndex - 1);});// 切换到下一张图片nextButton.addEventListener('click', () => {goToImage(currentIndex + 1);});// 点击指示器切换图片indicators.forEach((indicator, index) => {indicator.addEventListener('click', () => {goToImage(index);});});// 自动播放let autoPlayInterval = setInterval(() => {goToImage(currentIndex + 1);}, 3000);// 鼠标悬停时停止自动播放const carousel = document.querySelector('.carousel');carousel.addEventListener('mouseenter', () => {clearInterval(autoPlayInterval);});// 鼠标离开时恢复自动播放carousel.addEventListener('mouseleave', () => {autoPlayInterval = setInterval(() => {goToImage(currentIndex + 1);}, 3000);});</script>
</body>
</html>

html+js 轮播图

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>轮播图示例</title><style>/* 基本样式…...

编程日记 2025/8/28 20:28:25

蓝桥杯 Excel地址

Excel地址题目描述 Excel 单元格的地址表示很有趣，它使用字母来表示列号。比如， A 表示第 1 列， B 表示第 2 列， Z 表示第 26 列， AA 表示第 27 列， AB 表示第 28 列， BA 表示第 53 列&#x…...

编程日记 2025/8/28 0:08:18

相机几何与标定：从三维世界到二维图像的映射

本系列课程将带领读者开启一场独特的三维视觉工程之旅。我们不再止步于教科书式的公式推导，而是聚焦于如何将抽象的数学原理转化为可落地的工程实践。通过解剖相机的光学特性、构建成像数学模型、解析坐标系转换链条，直至亲手实现参数标定代码&#xff0…...

编程日记 2025/8/28 16:41:24

SCI期刊推荐 | 免版面费 | 计算机领域：信息系统、软件工程、自动化和控制

在学术研究领域，选择合适的SCI期刊对科研成果的传播与认可至关重要。了解SCI期刊的研究领域和方向是基础，确保投稿内容与期刊主题相符。同时，要关注期刊的影响因子和评估标准，选择具有较高影响力和学术认可度的期刊。阅读期刊的投…...

编程日记 2025/8/24 14:03:58

Cryptography 与 PyCryptodome 源码级解析

目录 Cryptography 与 PyCryptodome 源码级解析一、引言二、Cryptography 库源码解析2.1 Cryptography 库概述与设计理念2.2 核心模块与数据流分析2.2.1 目录结构与模块划分2.2.2 以 AES-GCM 模式为例的加解密实现2.2.3 源码示例解析 2.3 错误处理与边界检测三、PyCryptodome …...

编程日记 2025/8/28 1:48:14

std::string的模拟实现

目录 string的构造函数无参数的构造函数根据字符串初始化用n个ch字符初始化用一个字符串的前n个初始化拷贝构造用另一个string对象的pos位置向后len的长度初始化 [ ]解引用重载迭代器的实现非const版本 const版本扩容reserve和resize reserve resize p…...

编程日记 2025/8/27 1:43:15

GPU、NPU与LPU：大语言模型（LLM）硬件加速器全面对比分析

引言：大语言模型计算基础设施的演进随着大语言模型（LLM）的快速发展与广泛应用，高性能计算硬件已成为支撑LLM训练与推理的关键基础设施。目前市场上主要有三类处理器用于加速LLM相关任务：GPU（图形处理单元…...

编程日记 2025/8/21 18:40:21

常见限流算法

限流是指在高并发、大流量请求的情况下，限制新的流量对系统的访问，以保证系统服务的安全性。常见的限流算法及其详细介绍如下： 计数器算法（Fixed Window Counter） 原理：使用一个固定时间窗口内的计数器来…...

编程日记 2025/8/26 18:10:31

美国国家航空航天局（NASA）的PUNCH任务

地球浸没在来自太阳的物质流中。这种被称为太阳风的流正在冲刷我们的星球，造成令人叹为观止的极光，影响太空中的卫星和宇航员，甚至影响地面基础设施。美国宇航局（NASA）的 PUNCH（统一日冕和日球层旋光仪 Polarimeter to Unify the Corona and Heliosphere）任务将首次…...

编程日记 2025/8/27 15:57:31

REST API前端请求和后端接收

1、get请求，带"?" http://localhost:8080/api/aop/getResult?param123 GetMapping("getResult")public ResponseEntity<String> getResult(RequestParam("param") String param){return new ResponseEntity<>("12…...

编程日记 2025/8/28 20:26:49

OpenBMC：BmcWeb server.run-CSDN博客 server在接收了tcp连接请求后，会构造一个ConnectionType对象，然后通过post调度，运行该对象的start函数 1.ConnectionType类型其实也就是using ConnectionType = Connection<Adaptor, Handler>;类型由于ConnectionType实例化于…...

编程日记 2025/8/23 16:45:18

ESLint 深度解析：原理、规则与插件开发实践

在前端开发的复杂生态中，保障代码质量与规范性是构建稳健、可维护项目的基石。ESLint 作为一款强大的代码检查工具，其默认规则与插件能满足多数常见需求，但面对特定团队规范或项目独特要求，自定义 ESLint 插件便成为有力的扩展手段…...

编程日记 2025/8/28 5:47:25

ios使用swift调用deepseek或SiliconFlow接口

调用SiliconFlow API 注册并获取API密钥：打开硅基流动平台官网Models，进行注册和认证。登录后，进入首页，点击左上角三个横杠，选择API密钥，生成密钥并复制。配置第三方应用：打开安装好的Chatbox…...

编程日记 2025/8/28 20:25:02

贪心算法一

> 作者：დ旧言~ > 座右铭：松树千年终是朽，槿花一日自为荣。 > 目标：了解什么是贪心算法，并且掌握贪心算法。 > 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安! >…...

编程日记 2025/8/18 4:46:29

Java进阶：Dubbo

分布式RPC框架Apache Dubbo 1. 软件架构的演进过程软件架构的发展经历了由单体架构、垂直架构、SOA架构到微服务架构的演进过程，下面我们分别了解一下这几个架构。 1.1 单体架构架构说明： 全部功能集中在一个项目内（All in one&#xf…...

编程日记 2025/8/23 4:54:20

【Day9】make/makeFile如何让项目构建自动化起飞

【Day9】make/makeFile如何让项目构建自动化起飞使用make命令编写makefile文件依赖管理增量构建makefile注释：#makefile其他语法 make/makefile递归式工作过程在Linux中，项目自动化构建是指使用一系列工具和脚本来自动执行软件项目的编译、测试、打包和…...

编程日记 2025/8/28 20:27:33

SCI1区TOP：自适应学习粒子群算法SLPSO，深度解析+性能实测

目录 1.摘要2.改进策略3.自适应学习粒子群算法4.结果展示5.参考文献6.获取代码 1.摘要粒子群算法（PSO）是一种基于种群的随机搜索方法，广泛应用于科学和工程领域的连续空间优化问题，并已证明其高效性和有效性。许多实际问题的往往…...

编程日记 2025/8/24 23:46:41

迷你世界脚本显示板管理接口：DisPlayBoard

显示板管理接口：DisPlayBoard 迷你世界更新时间: 2023-04-26 10:21:14 具体函数名及描述如下: 序号函数名函数描述 1 showBoard(...) 对玩家显示显示板 2 hideBoard(...) 对玩家隐藏显示板 3 setBoardPicture 对玩家设置显示板的图片…...

编程日记 2025/8/28 20:27:34

如何使用 LLM 生成的术语自动在搜索应用程序上构建 autocomplete 功能

作者：来自 Elastic Michael Supangkat 了解如何在 Elastic Cloud 中，通过使用 LLM 生成的词汇，为搜索应用增强自动补全功能，实现更智能、更动态的搜索建议。自动补全是搜索应用中的一项关键功能，它通过在用户输入时实…...

编程日记 2025/8/26 6:09:24

电路基础：【1】PN结二极管制作电桥点亮LED灯

第一章：PN结二极管制作电桥点亮LED灯文章目录第一章：PN结二极管制作电桥点亮LED灯前言一、电路原理二、电路图与元器件1.电路图做实验总结前言在本章中，我们将探讨如何通过PN结二极管制作电桥电路，并利用该电路点亮LED灯。L…...

编程日记 2025/8/24 7:52:47

蓝桥与力扣刷题（蓝桥门牌制作）

题目：小蓝要为一条街的住户制作门牌号。这条街一共有 2020 位住户，门牌号从 1 到 2020编号。小蓝制作门牌的方法是先制作 0 到 9 这几个数字字符，最后根据需要将字符粘贴到门牌上，例如门牌 1017 需要依次粘贴字符 1、0、1、7&…...

编程日记 2025/8/28 20:26:50

unity console日志双击响应事件扩展

1 对于项目中一些比较长的日志，比如前后端交互协议具体数据等，这些日志内容可能会比较长，在unity控制面板上查看不是十分方便，我们可以对双击事件进行扩展，将日志保存到一个文本中，然后用系统默认的文本查看…...

编程日记 2025/8/28 20:26:25

基于Django创建一个WEB后端框架（DjangoRestFramework+MySQL)流程

一、Django项目初始化 1.创建Django项目 Django-admin startproject 项目名 2.安装 djangorestframework pip install djangorestframework 解释: Django REST Framework (DRF) 是基于 Django 框架的一个强大的 Web API 框架，提供了多种工具和库来构建 RESTf…...

编程日记 2025/8/28 20:26:27

unittest框架核心知识的系统复习及与pytest的对比

1. unittest 介绍是什么：Python 标准库自带的单元测试框架，遵循 xUnit 架构（类似Java的JUnit）。核心概念： TestCase：测试用例的基类，所有测试类需继承它。 TestSuite：测试套件&a…...

编程日记 2025/8/23 7:24:47

嵌入式硬件设计SPI时需要注意什么？

嵌入式硬件设计SPI时需要注意什么？ 1. 硬件设计注意事项关键点注意事项1. 信号完整性- 缩短SCK、MOSI、MISO的走线长度，避免反射干扰。- 使用屏蔽线或差分信号（高速场景）。- 阻抗匹配（特别是高频信号，如50Ω端接）。2. 电源与地线- 电源去耦：每个SPI芯片的VCC附近放置0…...

编程日记 2025/8/21 8:54:37

vscode远程ssh链接服务器

前提：安装并配置好 ssh 服务,并且远程主机和本地主机在同一个局域网。降级到1.85.2版本并禁用自动更新，因为最新的vscode不支持remote SSH。【VS Code】VS Code不再支持remote SSH 1.在vscode 扩展中搜索Remote - SSH,下载安装扩展 2.点击远程资源管理…...

编程日记 2025/8/20 12:35:59

97k倍区间

97k倍区间 ⭐️难度：中等 🌟考点：暴力，2017省赛 📖 📚 import java.util.Scanner;public class Main {static int N 100010;public static void main(String[] args) {Scanner sc new Scanner(System.…...

编程日记 2025/8/24 22:25:21

绝美焦糖暖色调复古风景画面Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色教程通过 Lr 软件丰富的工具和功能，对风景照片在色彩、影调等方面进行调整。例如利用基本参数调整选项，精准控制照片亮度、对比度、色温、色调等基础要素；运用 HSL 面板可对不同色彩的色相、饱和度以及明亮度进行单独调节；利…...

编程日记 2025/8/25 17:14:08

双王炸爆单，问界M8、M9怎么选？

文 | AUTO芯球作者 | 雷慢问界M8一小时小订7500台， 新问界M9一小时订单3800台。余承东这次直接把一对王炸打了出来， 来看这对大小王， 问界M8预售价36.8万到45.8万， 问界M9预售价47.8万到57.8万， 这两款车&…...

编程日记 2025/8/25 20:09:42

【自学笔记】OpenStack基础知识点总览-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 OpenStack基础知识点总览一、OpenStack概述1.1 OpenStack起源1.2 OpenStack的目标与优势1.3 OpenStack的常见核心项目二、OpenStack的节点类型2.1 控制节点2.2 网络…...

编程日记 2025/8/28 0:57:09

同步 Fork 仓库的命令

同步 Fork 仓库的命令要将您 fork 的仓库的 main 分支与原始仓库（fork 源）同步，您可以使用以下命令： 首先，确保您已经添加了原始仓库作为远程仓库（如果尚未添加）： git remote add…...

编程日记 2025/8/24 4:47:58

2025-03-04 学习记录--C/C++-C语言判断是否是素数

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。💪🏻 C语言判断是否是素数一、代码 ⭐️ #include <stdio.h> #include <stdbool.h> // 使用 bool 类型// 判断是否是…...

编程日记 2025/8/26 23:49:22

1、CI/CD 平台安装部署（Gitlab+Jenkins）

CI/CD 平台安装部署安装部署Gitlab安装Gitlab添加组、创建用户、创建项目 Jenkins 安装Maven 安装和配置Tomcat 安装和配置Jenkins 构建 Maven 项目自由风格项目构建什么是CI/CD？ 通俗来说就是启动一个服务，能够监听代码变化，然后自动执行构…...

编程日记 2025/8/18 6:13:37

数据集路径出错.yaml‘ images not found , missing path

方法一：删除settings.yaml 方法二：dataset_name.yaml改用绝对路径，如最后一张图错误分析： dataset_name.yaml中的path的路径仅支持绝对路径，写相对路径就会搜索不到，使用settings.json中的路径&#xff0…...

编程日记 2025/8/27 22:25:06

零基础学习Python 之类（Class）和实例（Instance）_我的学习Python记录12

零基础学习Python 之类（Class）和实例（Instance）_我的学习Python记录12 目录什么是类和实例？类的作用如何定义类？如何创建实例？类的属性和方法属性方法实际案例案例 1：学生信息…...

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

Map＜String,Object＞转换为XML报文的方法

1. 使用 JAXB (Java Architecture for XML Binding) JAXB 是 Java 标准库的一部分，支持将 Java 对象与 XML 相互转换。虽然 JAXB 主要用于将 Java 对象转换为 XML，但可以通过一些技巧将 Map<String, Object> 转换为 XML。示例代码 import java…...

编程日记 2025/8/25 3:05:42

Linux：如何安装虚拟机

Linux：如何安装虚拟机第一步首先打开阿里巴巴开源镜像网站然后点击相应要下载链接选择自己需要的这个是完整版这个是联网进行安装系统这个是基础版只有命令行界面这里我选择下载基础版下载好打开vmwareworkstation 开始安装...

编程日记 2025/8/23 12:34:24

HTML 编辑器推荐与 VS Code 使用教程

在进行 HTML 编程时，选择一款合适的 HTML 编辑器能极大地提高开发效率。以下为大家推荐几款常用且功能强大的 HTML 编辑器，同时详细介绍如何使用 VS Code 创建和预览 HTML 文件。一、HTML 编辑器推荐 VS Code：由微软开发，是一款…...

编程日记 2025/8/24 8:39:31

Python的Pandas和matplotlib库：让数据可视化贼简单

在数据爆炸的时代，数据可视化已成为数据分析的关键环节。Python 作为强大的编程语言，拥有众多用于数据可视化的库，而 pandas 库在其中扮演着重要角色。它不仅能高效处理和分析数据，还具备强大的数据可视化功能，让我们轻…...

编程日记 2025/8/27 8:45:27

私有云基础架构与运维（二）

二.私有云基础架构【项目概述】经过云计算基础知识及核心技术的学习后，希望进一步了解 IT 基础架构的演变过程，通过学习传统架构、集群架构以及私有云基础架构的相关知识，认识企业从传统 IT 基础架构到私有云基础架构转型的必要性。…...

编程日记 2025/8/25 18:28:44

Java Maven 项目问题：org.dom4j:dom4j:pom:2.1.3 failed to transfer from...

问题与处理策略问题描述 IDEA 中打开一个 Java 项目，使用 Maven 构建时，报如下错误 org.dom4j:dom4j:pom:2.1.3 failed to transfer from https://repo.maven.apache.org/maven2 during a previous attempt. This failure was cached in the local r…...

编程日记 2025/8/23 4:41:11

DeepSeek group-limited expert routing和负载均衡

Ref https://github.com/deepseek-ai/DeepSeek-V3/blob/main/inference/model.py GitHub - deepseek-ai/EPLB: Expert Parallelism Load Balancer DeepSeek-V3 Technical Report DeepSeek的路由方法 class Gate(nn.Module):def __init__(self, args: ModelArgs):super().__…...

编程日记 2025/8/25 21:38:46

相关文章：