htnl根据轮播图图片切换背景色
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…...
gpu-manager安装及测试
提示：GPU-manager安装为主部分内容做了升级开箱即用，有用请点收藏❤抱拳 文章目录 前言一、约束条件二、使用步骤1.下载镜像1.1 查看当前虚拟机的驱动类型： 2.部署gpu-manager3.部署gpu-admission4.修改kube-scheduler.yaml
Go和Java实现享元模式
Go和Java实现享元模式 下面通过一个实例来说明享元模式的使用。 1、享元模式 享元模式主要用于减少创建对象的数量，以减少内存占用和提高性能。这种类型的设计模式属于结构型模式，它提 供了减少对象数量从而改善应用所需的对象结构的方式。 享元模式…...
Zookeeper特性与节点数据类型详解
CAP&Base理论 CAP理论 cap理论是指对于一个分布式计算系统来说，不可能满足以下三点: 一致性 ： 在分布式环境中，一致性是指数据在多个副本之间是否能够保持一致的 特性，等同于所有节点访问同一份最新的数据副本。在一致性的需…...
函数的递归
1、什么是递归？ 程序调用自身的编程技巧称为递归。 递归作为一种算法在程序设计语言中广泛应用。一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解&#x…...
Android T 窗口层级其二 —— 层级结构树的构建（更新中）
如何通过dump中的内容找到对应的代码？ 我们dump窗口层级发现会有很多信息，adb shell dumpsys activity containers 这里我们以其中的DefaultTaskDisplayArea为例 在源码的framework目录下查找该字符串，找到对应的代码就可以通过打印堆栈或者…...
ASIC芯片设计全流程项目实战课重磅上线 ，支持 65nm制程流片 ！
全流程项目实战课学什么？ 此次推出【 ASIC芯片设计全流程项目实战课】，基于IPA图像处理加速器，以企业级真实ASIC项目为案例，学员可参与全流程项目实践，以及65nm真实流片！ 众所周知，放眼整个IC硕…...
背上沉重的书包准备run之react篇
沉重，太沉重了。。。没理好捏，等我脑子歇歇再好好补充一下 react特性？ React 是一个用于构建用户界面的 JavaScript 库，它具有以下特性： 组件化开发：React 基于组件化思想，将 UI 拆分为独立、…...
LAMP及论坛搭建
一、概述 LAMP架构是目前成熟的企业网站应用模式之一，指的是协同工作的一整套系统和相关软件，能够提供动态Web站点服务及其应用开发环境。LAMP是一个缩写词，具体包括Linux操作系统、Apache网站服务器、MySQL数据库服务器、PHP（或…...
php-cgi.exe - FastCGI 进程超过了配置的请求超时时限
解决方案一： 处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题 内容转载： 处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题_php技巧_脚本之家 【详细错误】： HTTP 错误 500.0 - Internal Server Error C:…...
linux系统虚拟主机开启支持SourceGuardian（sg11）加密组件
注意：sg11我司只支持linux系统虚拟主机自主安装。支持php5.3及以上版本。 1、登陆主机控制面板，找到【远程文件下载】这个功能。 2、远程下载文件填写http://download.myhostadmin.net/vps/sg11_for_linux.zip 下载保存的路径填写/others/ 3、点击控制…...
让我们一起探讨汽车充电桩控制主板的应用
你是否想过，你的汽车充电桩可以更智能?可以支持更多类型的电池，更多操作系统，更多协议和更多电源?让我们一起探讨汽车充电桩控制主板的应用。 控制主板是充电桩的大脑，它可以应用于各种充电桩，包括智能充电桩、电动汽…...
Gartner发布《2023年全球RPA魔力象限》：90%RPA厂商，将提供生成式AI自动化
8月3日，全球著名咨询调查机构Gartner发布了《2023年全球RPA魔力象限》，通过产品能力、技术创新、市场影响力等维度，对全球16家卓越RPA厂商进行了深度评估。 弘玑Cyclone（Cyclone Robotics）、来也（Laiye&am…...
springboot整合JMH做优化实战
这段时间接手项目出现各种问题，令人不胜烦扰。吐槽下公司做项目完全靠人堆，大上快上风格注定留下一地鸡毛，修修补补不如想如何提升同事代码水准免得背锅。偶然看到关于JMH对于优化java代码的直观性，于是有了这篇文章，希…...
利用ffmpeg分析视频流
ffprobe -show_packets -i "rtsp://192.168.61.46:8554/live?channel0&type0"：该命令用于显示 RTSP 流中的数据包信息，例如时间戳、大小、持续时间等。 ffprobe -i "rtsp://192.168.61.46:8554/live?channel0&type0"&…...
基于kettle实现pg数据定时转存mongodb
mogodb 待创建 基于kettle实现pg数据定时转存mongodb_kettle 实时迁移 mongodb_呆呆的私房菜的博客-CSDN博客...
使用 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…...
【java】default/private/public/protected比较
访问修饰符 访问修饰符本类同包子类其他privateYdefaultYYprotectedYYYpublicYYYY 总结： private、default、proteced、public访问范围依次增大、限制能力依次减弱；被private修饰的成员只能在本类中调用；default是默认类型，成员…...
面试热题（最长上升子序列）
给你一个整数数组 nums ，找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列，删除（或不删除）数组中的元素而不改变其余元素的顺序。例如，[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 输入࿱…...
Vue 简版文件预览笔记
简版文件预览笔记 调用方法 <script lang"ts" setup>import {exportFileData,preViewFile,} from /xxx/tools.ts;import {fileDownload,} from /api/xxx/xx;// 预览方法const handleViewBtn () > {const filePath 获取预览地址;const urlFormat 获取预…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...