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

htnl根据轮播图图片切换背景色

news 2026/2/10 19:12:06

htnl根据轮播图图片切换背景色

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>轮播图示例</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" /><script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script><style>.swiper-container {width: 80%;height: 300px;overflow: hidden;}.swiper-slide {width: 100%;height: 100%;background-size: cover;background-position: center;}</style>
</head><body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" style="background-image: url(./img/1.png);"></div><div class="swiper-slide" style="background-image: url(./img/2.png);"></div><div class="swiper-slide" style="background-image: url(./img/3.png);"></div></div></div><script>// 获取轮播图容器const swiperContainer = document.querySelector('.swiper-container');// 初始化 Swiper 实例const swiper = new Swiper(swiperContainer, {autoplay: true,loop: true,on: {slideChangeTransitionEnd: function () {// 获取当前轮播图的背景图片 URLconst currentSlide = this.slides[this.activeIndex];const backgroundImage = currentSlide.style.backgroundImage;// 创建一个 Image 对象const img = new Image();img.src = backgroundImage.slice(5, -2);// 等待图片加载完成img.onload = function () {// 创建一个 Canvas 元素const canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;// 在 Canvas 上绘制图片const ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0);// 获取图片的像素数据const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);const colors = {};for (let i = 0; i < imageData.data.length; i += 4) {const r = imageData.data[i];const g = imageData.data[i + 1];const b = imageData.data[i + 2];const color = `${r},${g},${b}`;if (colors[color]) {colors[color]++;} else {colors[color] = 1;}}const dominantColor = Object.keys(colors).reduce((a, b) => colors[a] > colors[b] ? a : b);// 设置页面背景色document.body.style.backgroundColor = `rgb(${dominantColor})`;};}}});</script>
</body></html>

相关文章：

htnl根据轮播图图片切换背景色

htnl根据轮播图图片切换背景色 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>轮播图示例</title><link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/swiper10/swiper-bundle.min.css&q…...

编程日记 2023/8/10 21:46:38

gpu-manager安装及测试

提示&#xff1a;GPU-manager安装为主部分内容做了升级开箱即用&#xff0c;有用请点收藏❤抱拳 文章目录 前言一、约束条件二、使用步骤1.下载镜像1.1 查看当前虚拟机的驱动类型&#xff1a; 2.部署gpu-manager3.部署gpu-admission4.修改kube-scheduler.yaml![在这里插入图片描…...

编程日记 2023/8/10 21:45:37

Go和Java实现享元模式

Go和Java实现享元模式 下面通过一个实例来说明享元模式的使用。 1、享元模式 享元模式主要用于减少创建对象的数量&#xff0c;以减少内存占用和提高性能。这种类型的设计模式属于结构型模式&#xff0c;它提 供了减少对象数量从而改善应用所需的对象结构的方式。 享元模式…...

编程日记 2023/8/10 21:44:35

Zookeeper特性与节点数据类型详解

CAP&Base理论 CAP理论 cap理论是指对于一个分布式计算系统来说&#xff0c;不可能满足以下三点: 一致性 &#xff1a; 在分布式环境中&#xff0c;一致性是指数据在多个副本之间是否能够保持一致的 特性&#xff0c;等同于所有节点访问同一份最新的数据副本。在一致性的需…...

编程日记 2023/8/10 21:43:34

函数的递归

1、什么是递归&#xff1f; 程序调用自身的编程技巧称为递归。 递归作为一种算法在程序设计语言中广泛应用。一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法&#xff0c;它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解&#x…...

编程日记 2023/8/10 21:42:33

Android T 窗口层级其二 —— 层级结构树的构建（更新中）

如何通过dump中的内容找到对应的代码&#xff1f; 我们dump窗口层级发现会有很多信息&#xff0c;adb shell dumpsys activity containers 这里我们以其中的DefaultTaskDisplayArea为例 在源码的framework目录下查找该字符串&#xff0c;找到对应的代码就可以通过打印堆栈或者…...

编程日记 2023/8/10 21:41:32

ASIC芯片设计全流程项目实战课重磅上线 ，支持 65nm制程流片 ！

全流程项目实战课学什么&#xff1f; 此次推出【 ASIC芯片设计全流程项目实战课】&#xff0c;基于IPA图像处理加速器&#xff0c;以企业级真实ASIC项目为案例&#xff0c;学员可参与全流程项目实践&#xff0c;以及65nm真实流片&#xff01; 众所周知&#xff0c;放眼整个IC硕…...

编程日记 2023/8/10 21:40:31

背上沉重的书包准备run之react篇

沉重&#xff0c;太沉重了。。。没理好捏&#xff0c;等我脑子歇歇再好好补充一下 react特性&#xff1f; React 是一个用于构建用户界面的 JavaScript 库&#xff0c;它具有以下特性&#xff1a; 组件化开发&#xff1a;React 基于组件化思想&#xff0c;将 UI 拆分为独立、…...

编程日记 2023/8/10 21:39:29

LAMP及论坛搭建

一、概述 LAMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务及其应用开发环境。LAMP是一个缩写词&#xff0c;具体包括Linux操作系统、Apache网站服务器、MySQL数据库服务器、PHP&#xff08;或…...

编程日记 2023/8/10 21:38:27

php-cgi.exe - FastCGI 进程超过了配置的请求超时时限

解决方案一&#xff1a; 处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题 内容转载&#xff1a; 处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题_php技巧_脚本之家 【详细错误】&#xff1a; HTTP 错误 500.0 - Internal Server Error C:…...

编程日记 2023/8/10 21:37:26

linux系统虚拟主机开启支持SourceGuardian（sg11）加密组件

注意&#xff1a;sg11我司只支持linux系统虚拟主机自主安装。支持php5.3及以上版本。 1、登陆主机控制面板&#xff0c;找到【远程文件下载】这个功能。 2、远程下载文件填写http://download.myhostadmin.net/vps/sg11_for_linux.zip 下载保存的路径填写/others/ 3、点击控制…...

编程日记 2023/8/10 21:36:25

让我们一起探讨汽车充电桩控制主板的应用

你是否想过&#xff0c;你的汽车充电桩可以更智能?可以支持更多类型的电池&#xff0c;更多操作系统&#xff0c;更多协议和更多电源?让我们一起探讨汽车充电桩控制主板的应用。 控制主板是充电桩的大脑&#xff0c;它可以应用于各种充电桩&#xff0c;包括智能充电桩、电动汽…...

编程日记 2023/8/10 21:35:24

Gartner发布《2023年全球RPA魔力象限》：90%RPA厂商，将提供生成式AI自动化

8月3日&#xff0c;全球著名咨询调查机构Gartner发布了《2023年全球RPA魔力象限》&#xff0c;通过产品能力、技术创新、市场影响力等维度&#xff0c;对全球16家卓越RPA厂商进行了深度评估。 弘玑Cyclone&#xff08;Cyclone Robotics&#xff09;、来也&#xff08;Laiye&am…...

编程日记 2023/8/10 21:34:23

springboot整合JMH做优化实战

这段时间接手项目出现各种问题&#xff0c;令人不胜烦扰。吐槽下公司做项目完全靠人堆&#xff0c;大上快上风格注定留下一地鸡毛&#xff0c;修修补补不如想如何提升同事代码水准免得背锅。偶然看到关于JMH对于优化java代码的直观性&#xff0c;于是有了这篇文章&#xff0c;希…...

编程日记 2023/8/10 21:33:22

利用ffmpeg分析视频流

ffprobe -show_packets -i "rtsp://192.168.61.46:8554/live?channel0&type0"&#xff1a;该命令用于显示 RTSP 流中的数据包信息&#xff0c;例如时间戳、大小、持续时间等。 ffprobe -i "rtsp://192.168.61.46:8554/live?channel0&type0"&…...

编程日记 2023/8/10 21:32:20

基于kettle实现pg数据定时转存mongodb

mogodb 待创建 基于kettle实现pg数据定时转存mongodb_kettle 实时迁移 mongodb_呆呆的私房菜的博客-CSDN博客...

编程日记 2023/8/10 21:31:19

使用 POI 在 Word 中重新开始编号、自定义标题格式

效果图 引入依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><!-- https…...

编程日记 2023/8/10 21:30:18

【java】default/private/public/protected比较

访问修饰符 访问修饰符本类同包子类其他privateYdefaultYYprotectedYYYpublicYYYY 总结&#xff1a; private、default、proteced、public访问范围依次增大、限制能力依次减弱&#xff1b;被private修饰的成员只能在本类中调用&#xff1b;default是默认类型&#xff0c;成员…...

编程日记 2023/8/10 21:29:17

面试热题（最长上升子序列）

给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 输入&#xff1…...

编程日记 2023/8/10 21:28:15

Vue 简版文件预览笔记

简版文件预览笔记 调用方法 <script lang"ts" setup>import {exportFileData,preViewFile,} from /xxx/tools.ts;import {fileDownload,} from /api/xxx/xx;// 预览方法const handleViewBtn () > {const filePath 获取预览地址;const urlFormat 获取预…...

编程日记 2023/8/10 21:27:13

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07