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

H5+CSS+JS制作好看的轮播图

news 来源：原创 2025/5/19 13:57:34

先来看效果

点击下方按钮可以做到平滑切换轮播，轮播图片可以根据自定义随心变化。

先来看一下页面代码结构

<div class="container"><div class="lunbo-wrap"><div id="slide"></div><div class="buttons"><div class="s_button">&lt;</div><div class="s_button">&gt;</div></div></div>
</div>

在这段代码中，#slide的地方用于存放轮播图片和图片上的文字介绍，可以直接写成纯静态的卡片，也可以使用JS动态读取数据，动态生成卡片，完整的轮播结构应该如下（纯静态卡片可以按照下面的代码直接用），对于按钮来说，可以自己选择喜欢的按钮放在这里就行，调整切换按钮位置从CSS处调整即可

<div class="container"><div class="lunbo-wrap"><div id="slide"><div class="item" style="background-image: url(&quot;img/photo1.jpg&quot;);"><div class="content"><div class="name">图片1</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo2.jpg&quot;);"><div class="content"><div class="name">图片2</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo3.jpg&quot;);"><div class="content"><div class="name">图片3</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo4.jpg&quot;);"><div class="content"><div class="name">图片4</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo5.jpg&quot;);"><div class="content"><div class="name">图片5</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo6.jpg&quot;);"><div class="content"><div class="name">图片6</div><div class="des">这是一串文字介绍</div></div></div></div><div class="buttons"><div class="s_button">&lt;</div><div class="s_button">&gt;</div></div></div>
</div>

如果需要动态的添加卡片，则可以使用如下的JS，这里记得导入JQuery的文件

$(document).ready(function() {$.getJSON('js/lunboJsonUp.json', function(data) {console.log("data:", data)const $slide = $('#slide');// 渲染轮播图data.forEach(item => {const $item = $('<div class="item"></div>').css('background-image', `url(${item.image})`).append($('<div class="content"></div>').append($('<div class="name"></div>').text(item.photoName),$('<div class="des"></div>').text(item.text),));$slide.append($item);});});//下一张：将所有带有 .item 类的第一个元素移动到 #slide 容器的末尾。document.querySelectorAll('.s_button')[1].onclick = () => {let lists = document.querySelectorAll('.item');document.querySelector('#slide').appendChild(lists[0]);}//上一张：将所有带有 .item 类的最后一个元素移动到 #slide 容器的开头document.querySelectorAll('.s_button')[0].onclick = () => {let lists = document.querySelectorAll('.item');document.querySelector('#slide').prepend(lists[lists.length - 1]);}
})

上述代码实现动态卡片生成，去主要部分还是在于点击按钮实现轮播的切换，我们来看上一张的操作：

document.querySelectorAll('.s_button')[0].onclick = () => {let lists = document.querySelectorAll('.item');document.querySelector('#slide').prepend(lists[lists.length - 1]);
}

        document.querySelectorAll('.s_button')[0]：选取所有带有.s_button类的元素，并获取其中第一个元素（索引为0）。这通常对应于“上一张”按钮。
        .onclick = () => { ... }：同样地，为该按钮添加一个点击事件监听器。
        let lists = document.querySelectorAll('.item')：与“下一张”功能相同，选择所有带有.item类的元素，并将它们存储在变量lists中。
        document.querySelector('#slide').prepend(lists[lists.length - 1])：找到ID为#slide的容器，并将最后一个.item元素（即lists[lists.length - 1]）移动到该容器的开头。这样就实现了当前显示的最后一个项目被移到最前，从而展示前一个项目。

下一张同理：

document.querySelectorAll('.s_button')[1].onclick = () => {let lists = document.querySelectorAll('.item');document.querySelector('#slide').appendChild(lists[0]);
}

        document.querySelectorAll('.s_button')[1]：选取所有带有.s_button类的元素，并获取其中第二个元素（索引为1）。这通常对应于“下一张”按钮。
        .onclick = () => { ... }：为该按钮添加一个点击事件监听器，当用户点击这个按钮时，执行箭头函数中的代码块。
        let lists = document.querySelectorAll('.item')：选择所有带有.item类的元素，并将它们存储在变量lists中。这些元素代表轮播图中的各个项目。
        document.querySelector('#slide').appendChild(lists[0])：找到ID为#slide的容器，并将第一个.item元素（即lists[0]）移动到该容器的末尾。这样就实现了当前显示的第一个项目被移到最后，从而展示下一个项目。

对于这样效果的轮播，主要还是在于轮播图样式的定义，下面是CSS完整代码

/* 重置所有元素的默认 margin 和 padding */
* {margin: 0;padding: 0;
}/* 轮播图容器样式 */
.lunbo-wrap {width: 1200px; /* 设置轮播图容器的宽度为1200px */height: 500px; /* 设置轮播图容器的高度为500px */position: absolute; /* 使用绝对定位 */top: 42%; /* 将顶部边缘设置为视口高度的42% */left: 50%; /* 将左侧边缘设置为视口宽度的50% */transform: translate(-50%, -50%); /* 使用平移变换使容器居中 */background-color: #f5f5f5; /* 设置背景颜色为浅灰色 */padding: 50px; /* 设置内边距为50px */box-shadow: 0 30px 50px #dbdbdb; /* 添加阴影效果 */
}/* 轮播图滑块样式 */
#slide {width: max-content; /* 设置滑块的宽度为最大内容宽度 */
}/* 每个轮播项的通用样式 */
.item {width: 200px; /* 设置每个轮播项的宽度为200px */height: 300px; /* 设置每个轮播项的高度为300px */background-position: 50%, 50%; /* 设置背景图片的位置 */display: inline-block; /* 使每个轮播项显示为行内块级元素 */background-size: cover; /* 使背景图片覆盖整个轮播项 */position: absolute; /* 使用绝对定位 */top: 60%; /* 设置顶部距离为60% */transform: translateY(-50%); /* 使用平移变换使轮播项垂直居中 */border-radius: 20px; /* 设置圆角半径 */box-shadow: 0 30px 50px #505050; /* 添加阴影效果 */transition: 0.5s; /* 设置过渡效果持续时间为0.5秒 */
}/* 第一个和第二个轮播项的特殊样式 */
.item:nth-child(1),
.item:nth-child(2) {top: 0; /* 设置顶部距离为0 */left: 0; /* 设置左侧距离为0 */width: 100%; /* 设置宽度为100% */height: 100%; /* 设置高度为100% */transform: translateY(0); /* 取消垂直居中 */border-radius: 0; /* 取消圆角 */box-shadow: none; /* 取消阴影 */
}/* 第三个轮播项的特殊位置 */
.item:nth-child(3) {left: 65%; /* 设置左侧距离为65% */
}/* 第四个轮播项的特殊位置 */
.item:nth-child(4) {left: calc(65% + 220px); /* 计算左侧距离 */
}/* 第五个轮播项的特殊位置 */
.item:nth-child(5) {left: calc(65% + 440px); /* 计算左侧距离 */
}/* 第六个轮播项的特殊位置 */
.item:nth-child(6) {left: calc(65% + 660px); /* 计算左侧距离 */opacity: 0; /* 设置透明度为0 */
}/* 轮播项中的内容样式 */
.item .content {width: 300px; /* 设置内容宽度 */position: absolute; /* 使用绝对定位 */left: 100px; /* 设置左侧距离 */top: 50%; /* 设置顶部距离 */transform: translateY(-50%); /* 使用平移变换使内容垂直居中 */font-family: system-ui; /* 设置字体 */color: black; /* 设置字体颜色 */display: none; /* 默认隐藏内容 */
}/* 第二个轮播项的内容默认显示 */
.item:nth-child(2) .content {display: block; /* 显示内容 */
}/* 轮播项中的名称样式 */
.item .name {font-size: 40px; /* 设置字体大小 */font-weight: bold; /* 设置字体加粗 */opacity: 0; /* 初始透明度为0 */animation: showcontent 1s ease-in-out 1 forwards; /* 定义动画效果 */
}/* 轮播项中的描述样式 */
.item .des {margin: 20px 0; /* 设置上下外边距 */opacity: 0; /* 初始透明度为0 */animation: showcontent 1s ease-in-out 0.3s 1 forwards; /* 延迟0.3秒后显示 */
}/* 轮播项中的按钮样式 */
.item button {padding: 10px 20px; /* 设置内边距 */border: none; /* 取消边框 */opacity: 0; /* 初始透明度为0 */animation: showcontent 1s ease-in-out 0.6s 1 forwards; /* 延迟0.6秒后显示 */
}/* 定义动画效果，这里主要是对于图片上文字部分的动画 */
@keyframes showcontent {from {opacity: 0; /* 初始透明度为0 */transform: translateY(100px); /* 向下移动100px */filter: blur(20px); /* 初始模糊效果 */}to {opacity: 1; /* 最终透明度为1 */transform: translateY(0); /* 不再移动 */filter: blur(0); /* 取消模糊效果 */}
}/* 控制按钮容器样式 */
.buttons {width: 100%; /* 设置宽度为100% */position: absolute; /* 使用绝对定位 */bottom: 50px; /* 设置底部距离 */margin-left: -50px; /* 设置左侧外边距 */text-align: center; /* 文本居中 */border: none; /* 取消边框 */
}/* 单个控制按钮样式 */
.s_button {display: inline-block; /* 行内块级元素 */border: none; /* 取消边框 */width: 50px; /* 设置宽度 */height: 50px; /* 设置高度 */line-height: 50px; /* 设置行高 */text-align: center; /* 文本居中 */color: gray; /* 设置字体颜色 */font-size: 25px; /* 设置字体大小 */border-radius: 50%; /* 设置圆形 */font-weight: bold; /* 设置字体加粗 */border: 1px solid #555; /* 设置边框 */margin: 0 25px; /* 设置外边距 */transition: 0.5s; /* 设置过渡效果 */
}/* 鼠标悬停时的控制按钮样式 */
.s_button:hover {cursor: pointer; /* 更改鼠标指针 */background-color: #ccc; /* 设置背景颜色 */
}

这里附上json文件，有需要的可以参考这个json来定义数据格式

[{"image": "img/photo1.jpg","photoName": "图片1","text": "这是一串文字介绍"},{"image": "img/photo2.jpg","photoName": "图片2","text": "这是一串文字介绍"},{"image": "img/photo3.jpg","photoName": "图片3","text": "这是一串文字介绍"},{"image": "img/photo4.jpg","photoName": "图片4","text": "这是一串文字介绍"},{"image": "img/photo5.jpg","photoName": "图片5","text": "这是一串文字介绍"},{"image": "img/photo6.jpg","photoName": "图片6","text": "这是一串文字介绍"}
]

H5+CSS+JS制作好看的轮播图

先来看效果点击下方按钮可以做到平滑切换轮播，轮播图片可以根据自定义随心变化。先来看一下页面代码结构 <div class"container"><div class"lunbo-wrap"><div id"slide"></div><div class"butto…...

编程日记 2025/5/19 13:57:34

Win10 部署llama Factory 推荐教程和遇到的问题

教程【大模型微调】使用Llama Factory实现中文llama3微调_哔哩哔哩_bilibili 大模型微调！手把手带你用LLaMA-Factory工具微调Qwen大模型！有手就行，零代码微调任意大语言模型_哔哩哔哩_bilibili 遇到问题解决办法 pytorch gpu国内镜像下载…...

编程日记 2025/5/19 22:35:59

Visual Studio踩过的坑

统计Unity项目代码行数编辑-查找和替换-在文件中查找查找内容输入 b*[^:b#/].*$ 勾选“使用正则表达式” 文件类型留空也有网友做了指定，供参考 !*\bin\*;!*\obj\*;!*\.*\*!*.meta;!*.prefab;!*.unity 打开Unity的项目注意：只是看&#xff0…...

编程日记 2025/5/15 0:44:05

idea如何使用AI编程提升效率-在IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤-卓伊凡

idea如何使用AI编程提升效率-在IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤-卓伊凡问题 idea编译器安装copilot AI工具实际操作在 IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤如下： 打开 IntelliJ IDEA： 打开你的 IntelliJ IDEA 应用…...

编程日记 2025/5/19 22:06:35

Leetcode 3449. Maximize the Minimum Game Score

Leetcode 3449. Maximize the Minimum Game Score 1. 解题思路2. 代码实现题目链接：3449. Maximize the Minimum Game Score 1. 解题思路这一题思路上就是一个二分法，尝试各个score，看看是否可以满足在给定的m次操作限制下，使…...

编程日记 2025/5/19 22:20:00

DeepSeek深度思考：客户端（Android/iOS）架构设计指南

目标读者：中高级开发者、架构师适用场景：大型复杂应用开发、跨团队协作、长期维护迭代一、架构设计核心原则 1.模块化（Modularization） 横向拆分：按功能边界划分（如登录、支付、消息模块）纵向…...

编程日记 2025/5/19 1:53:57

智能理解 PPT 内容，快速生成讲解视频

当我们想根据一版 PPT 制作出相对应的解锁视频时，从撰写解锁词，录制音频到剪辑视频，每一个环节都需要投入大量的时间和精力，本方案将依托于阿里云函数计算 FC 和百炼模型服务，实现从 PPT 到视频的全自动转换&#xff0…...

编程日记 2025/5/19 22:18:08

HTML 颜色值

HTML 颜色值引言在网页设计和开发中，颜色是一个重要的元素，它能够影响用户的视觉体验和网站的视觉效果。HTML 颜色值是网页设计中用来指定文本、背景或其他元素颜色的标准。本文将详细介绍 HTML 颜色值的概念、类型、表示方法以及在实际应用中的注意事项。 HTML 颜色值的…...

编程日记 2025/5/15 4:40:04

kafka消费端之消费者协调器和组协调器

文章目录概述回顾历史老版本获取消费者变更老版本存在的问题消费者协调器和组协调器新版如何解决老版本问题再均衡过程**第一阶段CFIND COORDINATOR****第二阶段（JOINGROUP）**选举消费组的lcader选举分区分配策略第三阶段（SYNC GROUP&…...

编程日记 2025/5/19 11:13:58

【C++】解锁＜list＞的正确姿势

> 🍃 本系列为初阶C的内容，如果感兴趣，欢迎订阅🚩 > 🎊个人主页:[小编的个人主页])小编的个人主页 > 🎀 🎉欢迎大家点赞👍收藏⭐文章 > ✌️ 🤞 &#x1…...

编程日记 2025/5/15 17:37:42

【玩转全栈】----Django模板的继承

先赞后看，养成习惯！！！ 目录模板继承的好处模板继承的语法规则更新代码上文中的部门管理页面： 【玩转全栈】----Django制作部门管理页面-CSDN博客大家会发现，由于定义了多个html文件，多个ht…...

编程日记 2025/5/19 22:42:47

【紫光同创PG2L100H开发板】盘古676系列，盘古100Pro+开发板，MES2L676-100HP

本原创文章由深圳市小眼睛科技有限公司创作，版权归本公司所有，如需转载，需授权并注明出处（www.meyesemi.com) 一：开发系统介绍开发系统概述 MES2L676-100HP开发板采用紫光创 logos2系列 FPGA，型号&#x…...

编程日记 2025/5/15 4:09:08

Mac下使用brew安装go 以及遇到的问题

首先按照网上找到的命令进行安装 brew install go 打开终端输入go version，查看安装的go版本 go version 配置环境变量查看go的环境变量配置： go env 事实上安装好后的go已经可以使用了。在home/go下新建src/hello目录，在该目录中新建…...

编程日记 2025/5/13 12:24:51

活动预告 |【Part 2】Microsoft 安全在线技术公开课：通过扩展检测和响应抵御威胁

课程介绍通过 Microsoft Learn 免费参加 Microsoft 安全在线技术公开课，掌握创造新机遇所需的技能，加快对 Microsoft Cloud 技术的了解。参加我们举办的“通过扩展检测和响应抵御威胁”技术公开课活动，了解如何更好地在 Microsoft 365 Defen…...

编程日记 2025/5/18 18:14:19

android的DataBinding简介

Android DataBinding 简介 DataBinding 是 Android Jetpack 中的数据绑定库，用于将 UI 组件直接与数据模型绑定，减少模板代码并实现双向数据同步。它通过声明式布局简化 UI 更新逻辑，常用于 MVVM（Model-View-ViewModel&#xff0…...

编程日记 2025/5/19 13:43:47

基于DeepSeek API和VSCode的自动化网页生成流程

1.创建API key 访问官网DeepSeek ，点击API开放平台。在开放平台界面左侧点击API keys，进入API keys管理界面，点击创建API key按钮创建API key，名称自定义。 2.下载并安装配置编辑器VSCode 官网Visual Studio Code - Code Editing…...

编程日记 2025/5/18 16:05:33

【DeepSeek】私有化本地部署图文（Win+Mac）

目录一、DeepSeek本地部署【Windows】 1、安装Ollama 2、配置环境变量 3、下载模型 4、使用示例 a、直接访问 b、chatbox网页访问二、DeepSeek本地部署【Mac】 1、安装Ollama 2、配置环境变量 3、下载模型 4、使用示例 5、删除已下载的模型三、DeepSeek其他 …...

编程日记 2025/5/8 17:06:07

vscode预览插件

在左侧列表拓展里搜索 Live Preview 安装，然后在html页面点击右键找到show Preview 结果如下图然后就可以进行代码开发并实时预览了...

编程日记 2025/5/18 16:05:17

迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-编写应用APP

在应用代码中我们实现如下功能： 当应用程序启动后会获取命令行参数。如果命令行没有参数，LED 灯将循环闪烁；如果命令行带有参数，则根据传输的参数控制 LED 灯的开启或关闭。通过 HdfIoServiceBind 绑定 LED灯的 HDF 服务&#xff…...

编程日记 2025/5/18 0:13:20

在大型语言模型（LLM）框架内Transformer架构与混合专家（MoE）策略的概念整合

文章目录传统的神经网络框架存在的问题一. Transformer架构综述1.1 transformer的输入1.1.1 词向量1.1.2 位置编码（Positional Encoding）1.1.3 编码器与解码器结构1.1.4 多头自注意力机制二.Transformer分步详解2.1 传统词向量存在的问题2.2 详解编解码…...

编程日记 2025/5/18 3:42:39

tolua[一]框架搭建，运行example

一.安装tolua https://github.com/topameng/tolua 下载LuaFramework_UGUI的zip 将Assets目录拷贝到项目根目录下提示确认注册，遇到这个对话框点确定即可生成如下目录二.LuaFramework->Build Windows Resource 接下来的目标是将这个main场景跑起来需要先执行…...

编程日记 2025/5/15 5:25:39

大数据项目4：基于spark的智慧交通项目设计与实现

项目概述项目直达 www.baiyuntu.com 随着交通数据的快速增长，传统的交通管理方式已无法满足现代城市的需求。交通大数据分析系统通过整合各类交通数据，利用大数据技术解决交通瓶颈问题，提升交通管理效率。本项目旨在通过大数据技术&#…...

编程日记 2025/5/15 15:06:51

Vue 响应式渲染 - 条件渲染

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染目录条件渲染 v-if v-if-else 模版template 物流状态显示判断设置数据不同状态渲染总结条件渲染 v-if 使用Vue条件判断显示和隐藏。示例如下： <!DOCTYPE html> …...

编程日记 2025/5/14 1:19:17

活动预告 |【Part1】Microsoft Azure 在线技术公开课：AI 基础知识

课程介绍参加“Azure 在线技术公开课：AI 基础知识”活动，了解 AI 核心概念。参加我们举办的本次免费培训活动，了解组织如何使用 AI 技术克服实际挑战，以及如何借助 Azure AI 服务构建智能应用程序。本次培训适用于任何对 AI 解决…...

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

OpenSIPS-Dispatcher模块详解：优化SIP流量分发的利器

在 OpenSIPS 中，dispatcher 模块用于实现负载均衡和故障转移。通过 dispatcher 模块，你可以将 SIP 请求分发到一组后端服务器（如媒体服务器、代理服务器等），并根据配置的算法和策略动态调整分发逻辑。模块功能使用样…...

编程日记 2025/5/17 17:37:48

深入理解linux中的文件（下）

目录一、语言级缓冲区和内核级缓冲区二、C语音中的FILE* fp fopen(“./file.txt”,"w"): 四、理解磁盘结构： 物理结构逻辑结构五、未被打开的文件： 六、更加深入理解inode编号怎么找到文件： 七、对路径结构进行…...

编程日记 2025/5/16 4:37:57

Deepseek系列从v3到R易背面经版

deepseek v3 base要点 MTP : Multi-Token Prediction 训练时： 1. 把前一个block中input tokens经过embedding layer和transformer block的输出，进入output head之前的内容记为h，与下一个block的input tokens经过embedding layer输出的内容都…...

编程日记 2025/5/17 4:34:32

SQLAlchemy 的内存消耗

为何要研究SQLAlchemy 的内存消耗问题？因为SQLAlchemy在应用中，绝大多数问题体现在应用人员对SQLAlchemy 的内存消耗问题不认知、不重视、不处理，最终造成整个系统的大问题，使SQLAlchemy 的性能大打折扣，最终影响了SQL…...

编程日记 2025/5/18 15:36:57

Centos Ollama + Deepseek-r1+Chatbox运行环境搭建

Centos Ollama Deepseek-r1Chatbox运行环境搭建内容介绍下载ollama在Ollama运行DeepSeek-r1模型使用chatbox连接ollama api 内容介绍你好！ 这篇文章简单讲述一下如何在linux环境搭建 Ollama Deepseek-r1。并在本地安装的Chatbox中进行远程调用下载ollama 登…...

编程日记 2025/5/13 12:44:24

vscode和pycharm的区别

VSCode（Visual Studio Code）和 PyCharm 是两款常用的 Python 开发工具，它们在功能和使用体验上有一些关键区别： 1. 核心定位 VSCode：轻量级、多语言支持的代码编辑器，依靠插件扩展 Python 开发能力。PyCh…...

编程日记 2025/5/17 14:45:03

【0403】Postgres内核检查（procArray ）给定 db 是否有其他 backend process 正在运行

文章目录 1. 给定 db 是否有其他 backend 正在运行1.1 获取 allPgXact[] 索引1.1.1 MyProc 中 databaseId 初始化实现1.2 allProcs[] 中各 databaseId 判断1. 给定 db 是否有其他 backend 正在运行 CREATE DATABASE 语句创建用户指定数据库名（database-name）时候，会通过 …...

编程日记 2025/5/19 4:18:15

MySQL 数据库的体系架构

MySQL 数据库的体系架构是其高效、灵活和可扩展性的核心基础。其设计采用分层模块化结构，主要分为以下四层： 1. 连接层（Connectors & Connection Pool） 功能：负责处理客户端连接、认证和权限管理。连接管理&a…...

编程日记 2025/5/16 12:37:11

【C++高并发服务器WebServer】-14：Select详解及实现

本文目录一、BIO模型二、非阻塞NIO忙轮询三、IO多路复用四、Select()多路复用实现明确一下IO多路复用的概念：IO多路复用能够使得程序同时监听多个文件描述符（文件描述符fd对应的是内核读写缓冲区），能够提升程序的性能。 Linux下…...

编程日记 2025/5/14 10:22:26

apisix网关ip-restriction插件使用说明

ip-restriction插件可以在网关层进行客户端请求ip拦截。当然了，一般不推荐使用该方法，专业的事专业工具做。建议有条件，还是上防火墙或者waf来做。官方文档：ip-restriction | Apache APISIX -- Cloud-Native API Gateway whit…...

编程日记 2025/5/18 21:12:16

15vue3实战-----props和emit传值

15vue3实战-----props和emit传值 1.emit的使用2.配合props实现完整父子通信 vue3中props和emit的使用有点不一样,但万变不离其宗。 1.emit的使用子组件: <script setup lang"ts"> // 定义触发的事件及其数据类型 const emit defineEmits([update, delete]…...

编程日记 2025/5/18 10:35:32

第二节 docker基础之---镜像构建及挂载

查看当前镜像： [rootdocker ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE [rootdocker ~]#很明显docker是咱们新搭建的所以目前还没有镜像 1，搜索镜像： [rootdocker ~]# docker search centos 搜索镜像并过滤是官…...

编程日记 2025/5/18 12:57:07

Android性能优化

Android性能优化如何优化一个包含大量图片加载的Android应用，以提高性能和用户体验？ 优化一个包含大量图片加载的Android应用，可以从以下几个方面入手，以提高性能和用户体验： 选择合适的图片加载库使用成熟的图片…...

编程日记 2025/5/14 21:24:12

scikit-learn简介

scikit-learn 是一个广泛使用的 Python 库，主要用于机器学习（ML）。它提供了一些简单高效的工具，适用于数据挖掘和数据分析。scikit-learn 基于 NumPy、SciPy 和 matplotlib 等科学计算库，具有易于使用的接口和高…...

编程日记 2025/5/19 5:55:15

一、导语使用 get_command_4_run_container 查询 docker 容器的启动命令获取镜像 docker pull cucker/get_command_4_run_container 查看容器命令 docker run --rm -v /var/run/docker.sock:/var/run/docker.sock cucker/get_command_4_run_container 容器id或容器名 …...

编程日记 2025/5/16 17:40:29

ssti学习笔记（服务器端模板注入）

目录一，ssti是什么二，原理所谓模板引擎（三列，可滑动查看） 三，漏洞复现 1，如何判断其所属的模板引擎？ 2，判断清楚后开始注入 （1）Jinja2&a…...

编程日记 2025/5/18 13:39:39

Docker 部署 RabbitMQ | 自带延时队列

一、获取镜像 docker pull farerboy/rabbitmq:3.9.9 二、运行镜像 docker run -d --name rabbitmq \n --hostname rabbitmq \n -p 15672:15672/tcp \n -p 5672:5672/tcp \n -v /wwwroot/opt/docker/rabbitmq:/var/lib/rabbitmq \n farerboy/rabbitmq:3.9.9 备注：…...

编程日记 2025/5/15 0:44:10

如何使用deepseek创建钉钉收费AI助理

1、打开deepseek，简单描述下自己的问题，勾选深度思考 2、deepseek给我生成了一大段提示词模板 3、打开钉钉-应用中心-找AI助理 4、点击立即创作 5、创作默认创建的是免费上网，需要创建收费的话需要先申请，填一个表单内容和价格&…...

编程日记 2025/5/19 9:58:08

【STM32系列】利用MATLAB配合ARM-DSP库设计FIR数字滤波器（保姆级教程）

ps.源码放在最后面设计IIR数字滤波器可以看这里：利用MATLAB配合ARM-DSP库设计IIR数字滤波器（保姆级教程） 前言本篇文章将介绍如何利用MATLAB与STM32的ARM-DSP库相结合，简明易懂地实现FIR低通滤波器的设计与应用。文章重点不在…...

编程日记 2025/5/19 0:24:39

2025年日祭

本文将同步发表于洛谷（暂无法访问）、CSDN 与 Github 个人博客（暂未发布） 本蒟自2025.2.8开始半停课。以下是题目格式： [题目OJ 题号] [来源（选填）] 名称 …… 题号 - 名称题目：……...

编程日记 2025/5/15 5:12:13

torch_bmm验算及代码测试

文章目录 1. torch_bmm2. pytorch源码 1. torch_bmm torch.bmm的作用是基于batch_size的矩阵乘法,torch.bmm的作用是对应batch位置的矩阵相乘，比如， mat1的第1个位置和mat2的第1个位置进行矩阵相乘得到mat3的第1个位置mat1的第2个位置和mat2的第2个位置…...

编程日记 2025/5/11 23:00:02

ChatGPT提问技巧：行业热门应用提示词案例-文案写作

ChatGPT 作为强大的 AI 语言模型，已经成为文案写作的得力助手。但要让它写出真正符合你需求的文案，关键在于如何与它“沟通”，也就是如何设计提示词（Prompt）。以下是一些实用的提示词案例，帮助你解锁 ChatG…...

编程日记 2025/5/19 18:07:18

k8s中,一.service发布服务,二.dashboard:基于网页的k8s管理插件,三.资源服务与帐号权限

一.service资源对内发布服务Cluster IP对外发布服务NodePortIngress 二.dashboard:基于网页的k8s管理插件三.资源服务与帐号权限一.service:用户无法预知pod的ip地址以及所在的节点,多个相同的pod如何访问他们上面的服务功能:1.服务自动感知:pod迁移后访问service的ip,不受影响…...

编程日记 2025/5/17 21:07:28

Python的那些事第十六篇：Python的网络爬虫技术

基于Python的网络爬虫技术研究与应用摘要随着互联网的飞速发展，网络爬虫技术在数据采集、信息挖掘等领域发挥着重要作用。本文详细介绍了Python环境下常用的网络爬虫技术，包括Requests库、BeautifulSoup库以及Scrapy框架。通过对这些工具的使用方法、…...

编程日记 2025/5/19 11:26:11

Linux第106步_Linux内核RTC驱动实验

1、了解rtc_device结构体 1)、打开“include/linux/rtc.h” rtc_class_ops是需要用户根据所使用的RTC设备编写的,其结构体如下: struct rtc_class_ops { int (*ioctl)(struct device *, unsigned int, unsigned long);/*函数指针ioctl*/ int (*read_time)(struct device *,…...

编程日记 2025/5/16 10:50:33

《XSS跨站脚本攻击》

一、XSS简介 XSS全称（Cross Site Scripting）跨站脚本攻击，为了避免和CSS层叠样式表名称冲突，所以改为了XSS，是最常见的Web应用程序安全漏洞之一，位于OWASP top 10 2013/2017年度分别为第三名和第七名&…...

编程日记 2025/5/19 7:29:12

相关文章：