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

React实现无缝滚动轮播图

news 来源：原创 2025/9/11 20:04:45

实现效果：

由于是演示代码，我是直接写在了App.tsx里面在

文件位置如下：

App.tsx代码如下：

import { useState, useEffect, useCallback, useRef } from "react";
import { ImageContainer } from "./view/ImageContainer";// 图片列表配置
const IMAGE_LIST = ["https://oss.cloudhubei.com.cn/cms/release/set35/20241014/9ec7a083198223c49c06e3ebbf8df33c.jpg","https://img0.baidu.com/it/u=3231399477,1564831636&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800","https://q4.itc.cn/images01/20240810/879397b2e3ed4bb8b35be2f272d26b7a.jpeg","https://img1.baidu.com/it/u=3484599935,468270965&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
];// 常量配置
const TRANSITION_DURATION = 500; // 过渡动画持续时间
const AUTO_PLAY_INTERVAL = 2000; // 自动播放间隔时间
const USER_INTERACTION_DELAY = 1000; // 用户交互后暂停自动播放的时间function App() {// 状态管理const [imgIndex, setImgIndex] = useState<number>(0); // 当前显示的图片索引const [isAutoPlaying, setIsAutoPlaying] = useState(false); // 是否自动播放const [isSliding, setIsSliding] = useState(false); // 是否正在滑动const [direction, setDirection] = useState<"left" | "right">("left"); // 滑动方向const [isPaused, setIsPaused] = useState(false); // 是否暂停（鼠标悬停时）const [translateX, setTranslateX] = useState(0); // 滑动距离const [userInteracting, setUserInteracting] = useState(false); // 用户是否正在交互const userInteractingTimer = useRef<NodeJS.Timeout | null>(null); // 用户交互定时器// 处理图片过渡效果const handleSlideTransition = useCallback((nextIndex: number, slideDirection: "left" | "right") => {if (isSliding) return;setDirection(slideDirection);setIsSliding(true);// 计算每张图片的宽度百分比const itemWidth = 100 / (IMAGE_LIST.length + 1);if (nextIndex >= IMAGE_LIST.length) {// 处理从最后一张到第一张的无缝滚动setTranslateX(-(nextIndex * itemWidth));setTimeout(() => {setIsSliding(false);setTranslateX(0);setImgIndex(0);}, TRANSITION_DURATION);} else {// 普通图片切换setTranslateX(-(nextIndex * itemWidth));setTimeout(() => {setImgIndex(nextIndex);setIsSliding(false);}, TRANSITION_DURATION);}},[isSliding]);// 处理用户交互状态const handleUserInteraction = useCallback(() => {setUserInteracting(true);if (userInteractingTimer.current) {clearTimeout(userInteractingTimer.current);}userInteractingTimer.current = setTimeout(() => {setUserInteracting(false);}, USER_INTERACTION_DELAY);}, []);// 下一张图片const handleNext = useCallback(() => {if (isSliding) return;handleUserInteraction();const nextIndex =imgIndex === IMAGE_LIST.length - 1 ? IMAGE_LIST.length : imgIndex + 1;handleSlideTransition(nextIndex, "left");}, [imgIndex, isSliding, handleSlideTransition, handleUserInteraction]);// 上一张图片const handlePrevious = useCallback(() => {if (isSliding) return;handleUserInteraction();const previousIndex = imgIndex === 0 ? IMAGE_LIST.length - 1 : imgIndex - 1;handleSlideTransition(previousIndex, "right");}, [imgIndex, isSliding, handleSlideTransition, handleUserInteraction]);// 点击指示器切换图片const handleDotClick = useCallback((index: number) => {if (isSliding || index === imgIndex) return;handleUserInteraction();// 处理特殊情况的无缝滚动if (imgIndex === IMAGE_LIST.length - 1 && index === 0) {handleSlideTransition(IMAGE_LIST.length, "left");} else if (imgIndex === 0 && index === IMAGE_LIST.length - 1) {handleSlideTransition(index, "right");} else {const slideDirection = index > imgIndex ? "left" : "right";handleSlideTransition(index, slideDirection);}},[imgIndex, isSliding, handleSlideTransition, handleUserInteraction]);// 鼠标悬停处理const handleMouseEnter = useCallback(() => {if (isAutoPlaying) {setIsPaused(true);}}, [isAutoPlaying]);const handleMouseLeave = useCallback(() => {if (isAutoPlaying) {setIsPaused(false);}}, [isAutoPlaying]);// 切换自动播放状态const handleToggleAutoPlay = useCallback(() => {setIsAutoPlaying((prev) => {if (!prev) {setUserInteracting(false);if (userInteractingTimer.current) {clearTimeout(userInteractingTimer.current);}}return !prev;});}, []);// 初始化useEffect(() => {setTranslateX(0);setImgIndex(0);}, []);// 清理定时器useEffect(() => {return () => {if (userInteractingTimer.current) {clearTimeout(userInteractingTimer.current);}};}, []);// 自动播放控制useEffect(() => {let timer: NodeJS.Timeout;if (isAutoPlaying && !isSliding && !isPaused && !userInteracting) {timer = setInterval(() => {const nextIndex =imgIndex === IMAGE_LIST.length - 1 ? IMAGE_LIST.length : imgIndex + 1;handleSlideTransition(nextIndex, "left");}, AUTO_PLAY_INTERVAL);}return () => {if (timer) {clearInterval(timer);}};}, [isAutoPlaying,isSliding,isPaused,userInteracting,imgIndex,handleSlideTransition,]);return (<div className={`App ${isSliding ? "sliding" : ""}`}><ImageContainercurrentIndex={imgIndex}onNext={handleNext}onPrevious={handlePrevious}onToggleAutoPlay={handleToggleAutoPlay}isAutoPlaying={isAutoPlaying}totalImages={IMAGE_LIST.length}onDotClick={handleDotClick}imgList={IMAGE_LIST}direction={direction}onMouseEnter={handleMouseEnter}onMouseLeave={handleMouseLeave}isSliding={isSliding}translateX={translateX}/></div>);
}export default App;

ImageContainer.tsx代码如下：

import "./ImageContainer.css";// Props 类型定义
interface PropsType {currentIndex: number; // 当前显示的图片索引totalImages: number; // 图片总数imgList: string[]; // 图片列表isSliding: boolean; // 是否正在滑动isAutoPlaying: boolean; // 是否自动播放中direction: "left" | "right"; // 滑动方向translateX: number; // 滑动距离onNext: () => void; // 下一张回调onPrevious: () => void; // 上一张回调onToggleAutoPlay: () => void; // 切换自动播放回调onDotClick: (index: number) => void; // 点击指示器回调onMouseEnter: () => void; // 鼠标进入回调onMouseLeave: () => void; // 鼠标离开回调
}export const ImageContainer = (props: PropsType) => {// 创建包含额外图片的数组（在末尾添加第一张图片的副本，用于无缝滚动）const extendedImages = [...props.imgList, props.imgList[0]];// 计算滑动容器样式const sliderStyle = {transform: `translateX(${props.translateX}%)`,width: `${(props.totalImages + 1) * 100}%`, // 总宽度包含额外的图片};// 构建滑动容器的类名const sliderClassName = ["image-slider",props.direction,props.isSliding ? "sliding" : "",].filter(Boolean).join(" ");// 渲染控制按钮组const renderControls = () => (<div className="button-group"><button className="control-btn" onClick={props.onPrevious}>上一张</button><button className="control-btn" onClick={props.onToggleAutoPlay}>{props.isAutoPlaying ? "停止" : "自动播放"}</button><button className="control-btn" onClick={props.onNext}>下一张</button></div>);// 渲染指示器小圆点const renderDots = () => (<div className="dots-container">{Array.from({ length: props.totalImages }).map((_, index) => (<divkey={index}className={`dot ${index === props.currentIndex ? "active" : ""}`}onClick={() => props.onDotClick(index)}/>))}</div>);return (<divclassName="image-container"onMouseEnter={props.onMouseEnter}onMouseLeave={props.onMouseLeave}>{/* 图片滑动容器 */}<div className={sliderClassName} style={sliderStyle}>{extendedImages.map((img, index) => (<imgkey={index}className="fullscreen-img"src={img}alt={`slide-${index}`}style={{ width: `${100 / (props.totalImages + 1)}%` }}/>))}</div>{/* 控制器容器 */}<div className="controls-container">{renderControls()}{renderDots()}</div></div>);
};

ImageContainer.css代码如下：

/* 容器样式 */
.image-container {position: relative;width: 100vw;height: 100vh;overflow: hidden;background-color: #000;
}/* 滑动容器样式 */
.image-slider {position: relative;height: 100%;display: flex;
}/* 滑动过渡效果 */
.image-slider.sliding {transition: transform 0.5s ease-out;
}/* 图片样式 */
.fullscreen-img {height: 100%;object-fit: cover;flex-shrink: 0;
}/* 控制器容器样式 */
.controls-container {position: fixed;bottom: 40px;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;gap: 20px;z-index: 10;
}/* 按钮组样式 */
.button-group {display: flex;gap: 20px;
}.control-btn {padding: 10px 20px;border: none;border-radius: 20px;background-color: rgba(0, 0, 0, 0.5);color: white;cursor: pointer;transition: background-color 0.3s;font-size: 14px;
}.control-btn:hover {background-color: rgba(0, 0, 0, 0.8);
}/* 指示器样式 */
.dots-container {display: flex;gap: 12px;
}.dot {width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);cursor: pointer;transition: all 0.3s;
}.dot:hover:not(.active) {background-color: rgba(255, 255, 255, 0.7);transform: scale(1.1);
}.dot.active {background-color: white;transform: scale(1.1);
}

React实现无缝滚动轮播图

实现效果： 由于是演示代码，我是直接写在了App.tsx里面在文件位置如下： App.tsx代码如下： import { useState, useEffect, useCallback, useRef } from "react"; import { ImageContainer } from "./view/ImageC…...

编程日记 2025/9/11 20:04:45

Ubuntu20.04确认cuda和cudnn已经安装成功

当我们通过官网安装cuda和cudnn时，终端执行完命令后我们仍不能确定是否已经安装成功。接下来教大家用几句命令测试。 cuda 检测版本号 nvcc -V如果输出如下，则安装成功。可以看到版本号是11.2 cudnn检测版本号有两种命令：如果你的cudn…...

编程日记 2025/9/7 1:39:40

sqlilab 46 关（布尔、时间盲注）

sqlilabs 46关（布尔、时间盲注） 46关有变化了，需要我们输入sort，那我们就从sort1开始递增测试： 发现测试到sort4就出现报错： 我们查看源码： 从图中可看出：用户输入的sort值被用于查…...

编程日记 2025/9/11 19:41:04

AI时代保护自己的隐私

人工智能最重要的就是数据，让我们面对现实，大多数人都不知道他们每天要向人工智能提供多少数据。你输入的每条聊天记录，你发出的每条语音命令，人工智能生成的每张图片、电子邮件和文本。我建设了一个网站(haptool.com)&#xff0c…...

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

模型优化之强化学习（RL）与监督微调（SFT）的区别和联系

强化学习（RL）与监督微调（SFT）是机器学习中两种重要的模型优化方法，它们在目标、数据依赖、应用场景及实现方式上既有联系又有区别。想了解有关deepseek本地训练的内容可以看我的文章： 本地基于GGUF部署的…...

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

Buildroot 添加自定义模块-内置文件到文件系统

目录概述实现步骤1. 创建包目录和文件结构2. 配置 Config.in3. 定义 cp_bin_files.mk4. 添加源文件install.shmy.conf 5. 配置与编译概述 Buildroot 是一个高度可定制和模块化的嵌入式 Linux 构建系统，适用于从简单到复杂的各种嵌入式项目. buildroot的源码中bui…...

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

蓝牙接近开关模块感应开锁手机靠近解锁支持HID低功耗

ANS-BT101M是安朔科技推出的蓝牙接近开关模块，低功耗ble5.1，采用UART通信接口，实现手机自动无感连接，无需APP，人靠近车门自动开锁，支持苹果、安卓、鸿蒙系统，也可以通过手机手动开锁或上锁&…...

编程日记 2025/9/10 17:07:12

计算机毕业设计SpringBoot+Vue.js基于工程教育认证的计算机课程管理平台(源码+文档+PPT+讲解)

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/9/7 4:14:56

企业知识库搭建：14款开源与免费系统选择

本文介绍了以下14 款知识库管理系统：1.Worktile；2.PingCode；3.石墨文档； 4. 语雀； 5. 有道云笔记； 6. Bitrix24； 7. Logseq等。在如今的数字化时代，企业和团队面临着越来越多的信息…...

编程日记 2025/9/9 6:08:31

蓝桥杯（握手问题）

小蓝组织了一场算法交流会议，总共有 50 人参加了本次会议。在会议上，大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手 (且仅有一次)。但有 7个人，这 7 人彼此之间没有进行握手 (但这 7 人与除这 7 人以外…...

编程日记 2025/9/8 16:55:37

如何使用 Jenkins 实现 CI/CD 流水线：从零开始搭建自动化部署流程

如何使用 Jenkins 实现 CI/CD 流水线：从零开始搭建自动化部署流程在软件开发过程中，持续集成（CI）和持续交付（CD）已经成为现代开发和运维的标准实践。随着代码的迭代越来越频繁，传统的手动部署方式不仅低效，而且容易出错。为了提高开发效率和代码质量，Jenkins作为一款…...

编程日记 2025/9/8 5:20:57

c++字符编码/乱码问题

基本概念 c11版本引入了char16_t和char32_t两个类型，他们的特点分别如下： char16_t 16位的unicode字符类型用于表示UTF-16编码大小：2字节字面量前缀：u char32_t 32位unicode字符类型用于表示UTF-32编码大小：4字节…...

编程日记 2025/9/11 20:03:02

侯捷 C++ 课程学习笔记：深入理解类与继承

文章目录每日一句正能量一、课程背景二、学习内容：类与继承（一）类的基本概念1. 类的定义与实例化2. 构造函数与析构函数 （二）继承1. 单继承与多继承2. 虚函数与多态三、学习心得四、总结每日一句正能量有种承担&am…...

编程日记 2025/9/10 21:30:48

初始化列表

一：声明，定义，赋值的区别 ①：声明这里，int _year; int _month;int _day; 是成员变量的声明，它们告诉编译器： 类 Date中有三个成员变量_year和 _month和_day。它们的类型分别都是 int 此…...

编程日记 2025/9/7 19:08:53

7.1 - 定时器之中断控制LED实验

文章目录 1 实验任务2 系统框图3 软件设计 1 实验任务本实验任务是通过CPU私有定时器的中断，每 200ms 控制一次PS LED灯的亮灭。 2 系统框图 3 软件设计注意事项： 定时器中断在收到中断后，只需清除中断状态，无需禁用中断、启…...

编程日记 2025/9/6 20:46:37

Pytest之fixture的常见用法

文章目录 1.前言2.使用fixture执行前置操作3.使用conftest共享fixture4.使用yield执行后置操作 1.前言在pytest中，fixture是一个非常强大和灵活的功能，用于为测试函数提供固定的测试数据、测试环境或执行一些前置和后置操作等， 与setup和te…...

编程日记 2025/9/11 0:11:27

【分库分表】基于mysql+shardingSphere的分库分表技术

目录 1.什么是分库分表 2.分片方法 3.测试数据 4.shardingSphere 4.1.介绍 4.2.sharding jdbc 4.3.sharding proxy 4.4.两者之间的对比 5.留个尾巴 1.什么是分库分表分库分表是一种场景解决方案，它的出现是为了解决一些场景问题的，哪些场景喃…...

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

合并两个有序链表：递归与迭代的实现分析

合并两个有序链表：递归与迭代的实现分析在算法与数据结构的世界里，链表作为一种基本的数据结构，经常被用来解决各种问题。特别是对于有序链表的合并，既是经典面试题，也是提高编程能力的重要练习之一。合并两个有序链…...

编程日记 2025/9/11 7:53:47

HTML AI 编程助手

HTML AI 编程助手引言随着人工智能技术的飞速发展，编程领域也迎来了新的变革。HTML，作为网页制作的基础语言，与AI技术的结合，为开发者带来了前所未有的便利。本文将探讨HTML AI编程助手的功能、应用场景以及如何利用它提高编程…...

编程日记 2025/9/6 17:24:01

备战蓝桥杯Day11 DFS

DFS 1.要点 (1)朴素dfs 下面保存现场和恢复现场就是回溯法的思想，用dfs实现，而本质是用递归实现，代码框架: ans; //答案，常用全局变量表示 int mark[N]; //记录状态i是否被处理过 …...

编程日记 2025/9/9 10:12:29

Oracle 认证为有哪几个技术方向

Oracle 认证技术方向，分别是数据库管理、开发、云平台，每个方向都有不同的学习等级数据库运维方向 Oracle Certified Professional（OCP）：19c OCA内容已和OCP合并 OCP 19c属于oracle认证专家，要求考生掌握深…...

编程日记 2025/9/9 12:03:16

25物理学研究生复试面试问题汇总物理学专业知识问题很全！物理学复试全流程攻略物理学考研复试调剂真题汇总

正在为物理考研复试专业面试发愁的你，是不是不知道从哪开始准备？ 学姐告诉你，其实物理考研复试并没有你想象的那么难！只要掌握正确的备考方法，稳扎稳打，你也可以轻松拿下高分！今天给大家准备了…...

编程日记 2025/9/10 6:05:18

网络安全技术与应用

文章详细介绍了网络安全及相关技术，分析了其中的一类应用安全问题——ＰＣ机的安全问题，给出了解决这类问题的安全技术——ＰＣ防火墙技术。 １ 网络安全及相关技术自２０世纪…...

编程日记 2025/9/9 13:09:37

APISIX Dashboard上的配置操作

文章目录登录配置路由配置消费者创建后端服务项目配置上游再创建一个路由测试登录 http://192.168.10.101:9000/user/login?redirect%2Fdashboard 根据docker 容器里的指定端口： 配置路由通过apisix 的API管理接口来创建（此路由，直接…...

编程日记 2025/9/9 22:57:31

深度剖析数据分析职业成长阶梯

一、数据分析岗位剖析目前，数据分析领域主要有以下几类岗位：业务数据分析师、商业数据分析师、数据运营、数据产品经理、数据工程师、数据科学家等，按照工作侧重点不同，本文将上述岗位分为偏业务和偏技术两大类，并对…...

编程日记 2025/9/9 18:16:27

HarmonyOS学习第11天：布局秘籍RelativeLayout进阶之路

布局基础：RelativeLayout 初印象在 HarmonyOS 的界面开发中，布局是构建用户界面的关键环节，它决定了各个组件在屏幕上的位置和排列方式。而 RelativeLayout（相对布局）则是其中一种功能强大且灵活的布局方式&#xff0…...

编程日记 2025/9/7 11:38:26

问题修复-后端返给前端的时间展示错误

问题现象： 后端给前端返回的时间展示有问题。需要按照yyyy-MM-dd HH:mm:ss 的形式展示两种办法： 第一种在实体类的属性上添加JsonFormat注解第二种（建议使用） 扩展mvc框架中的消息转换器代码： 因为配置类继…...

编程日记 2025/9/9 7:18:34

怎么排查页面响应慢的问题

一、排查流程图 -----------------| 全局监控报警触发 |-----------------|▼-----------------| 定位异常服务节点 |-----------------|------------------▼ ▼ ----------------- ----------------- | 基础设施层排查 | | 应用层代码排查 | | (网…...

编程日记 2025/9/7 5:59:06

第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第一步安装：npm install pinia 第二步：操作src/main.ts 改变里面的值的信息： <div class"count"><h2>当前求和为：{{ sum }}</h2><select v-model.number"n">　 // .number 这里是…...

编程日记 2025/9/5 12:08:00

SpringBoot——生成Excel文件

在Springboot以及其他的一些项目中，或许我们可能需要将数据查询出来进行生成Excel文件进行数据的展示，或者用于进行邮箱发送进行附件添加依赖引入此处demo使用maven依赖进行使用 <dependency><groupId>org.apache.poi</groupId>&…...

编程日记 2025/9/10 8:51:39

java高级（IO流多线程）

file 递归字符集编码乱码gbk，a我m，utf-8 缓冲流冒泡排序 //冒泡排序 public static void bubbleSort(int[] arr) {int n arr.length;for (int i 0; i < n - 1; i) { // 外层循环控制排序轮数for (int j 0; j < n -i - 1; j) { // 内层循环…...

编程日记 2025/9/8 15:02:45

MySQL 用户权限管理深度解析：从基础到高阶实践（2000字指南）

MySQL 用户权限管理是数据库安全与运维的核心环节。无论是本地开发环境还是企业级生产环境，合理配置用户权限、理解版本差异、遵循安全规范都至关重要。本文将从基础权限配置、版本差异详解、安全加固策略、高阶权限管理、故障排查等多个维度展开，覆盖 MySQL 5.7、8.0 …...

编程日记 2025/9/6 16:38:31

【0011】HTML其他文本格式化标签详解（em标签、strong标签、b标签、i标签、sup标签、sub标签......）

如果你觉得我的文章写的不错，请关注我哟，请点赞、评论，收藏此文章，谢谢！ 本文内容体系结构如下： 本文旨在深入探讨HTML中其他的文本格式化标签，主要有<em> 标签、<strong> 标签、…...

编程日记 2025/9/10 14:19:15

数据虚拟化的中阶实践：从概念到实现

数据虚拟化的中阶实践：从概念到实现在大数据时代，数据的数量、种类和来源呈现爆炸式增长，如何高效、灵活地访问和利用这些数据成为了企业面临的重要问题。数据虚拟化作为一种创新的技术，正逐渐成为解决这一难题的关键。它通过抽象化层将底层数据源与应用程序隔离，使得数…...

编程日记 2025/9/10 16:30:01

AI辅助学习vue第十四章

第十四章：技术引领与未来展望在第十五章，你已经在Vue技术领域深耕许久，积累了丰富的经验与卓越的影响力。此时，你将站在行业前沿，引领技术走向，为Vue技术的未来发展开辟新道路。 1. 引领Vue技术发展方向…...

编程日记 2025/9/6 16:43:45

DeepEP库开源啦！DeepSeek优化GPU通信，破算力瓶颈。

在人工智能和大数据日益盛行的今天，算力成为了制约技术发展的关键因素之一。随着模型规模的不断扩大，GPU间的通信瓶颈问题日益凸显，成为了制约深度学习训练效率的一大难题。近日，DeepSeek团队开源了DeepEP库，旨在通过优…...

编程日记 2025/9/5 22:47:54

蓝桥杯web第三天

展开扇子题目， #box:hover #item1 { transform:rotate(-60deg); } 当悬浮在父盒子，子元素旋转 webkit display: -webkit-box：将元素设置为弹性伸缩盒子模型。-webkit-box-orient: vertical：设置伸缩盒子的子元素排列方…...

编程日记 2025/9/10 14:00:09

Gin从入门到精通 (七)文件上传和下载

文件上传和下载 1.文件上传 1.1单文件上传在 Gin 中处理单文件上传，可以使用 c.FormFile 方法获取上传的文件，然后使用 c.SaveUploadedFile 方法保存文件。 package mainimport ("github.com/gin-gonic/gin""log" )func main()…...

编程日记 2025/9/6 18:10:07

【Java】Stream API

概述 Stream API ( java.util.stream) 把真正的函数式编程风格引入到Java中。这是目前为止对Java类库最好的补充，因为Stream API可以极大提供Java程序员的生产力，让程序员写出高效率、干净、简洁的代码。 Stream是Java8中处理集合的关键抽象概念&#…...

编程日记 2025/9/9 21:28:35

linux-Dockerfile及docker-compose.yml相关字段用途

文章目录计算机系统5G云计算LINUX Dockerfile及docker-conpose.yml相关字段用途一、Dockerfile1、基础指令2、.高级指令3、多阶段构建指令二、Docker-Compose.yml1、服务定义（services）2、高级服务配置3、网络配置 (networks)4、卷配置 (volumes)5、扩…...

编程日记 2025/9/7 18:25:13

基于Selenium的Python淘宝评论爬取教程

文章目录前言1. 环境准备安装 Python：安装 Selenium：下载浏览器驱动： 2. 实现思路3. 代码实现4. 代码解释5. 注意事项前言以下是一个基于 Selenium 的 Python 淘宝评论爬取教程，需要注意的是，爬取网站数据应当遵守…...

编程日记 2025/9/7 13:08:31

网络空间安全（7）攻防环境搭建

一、搭建前的准备硬件资源：至少需要两台计算机，一台作为攻击机，用于执行攻击操作；另一台作为靶机，作为被攻击的目标。软件资源： 操作系统：如Windows、Linux等，用于安装在攻击机和…...

编程日记 2025/9/11 6:37:18

【Veristand】Veristand 预编写教程目录

很久没有更新，最近打算出一期Veristand教程，暂时目录列成下面这个表格，如果各位有关心的遗漏的点，可以在评论区提问，我后期可以考虑添加进去，但是提前声明，太过小众的点我不会，欢迎各…...

编程日记 2025/9/8 21:47:40

大白话页面加载速度，如何优化提升？

大白话页面加载速度，如何优化提升？ 咱来好好唠唠页面加载速度这事儿，再说说怎么把它提上去。页面加载速度是咋回事儿页面加载速度啊，就好比你去餐厅吃饭，从你坐下点餐到饭菜端上桌的时间。在网页里，就…...

编程日记 2025/9/5 22:46:35

PyCharm 环境配置精髓：打造高效 Python 开发的基石

PyCharm 环境配置精髓：打造高效 Python 开发的基石在现代软件开发的浪潮中，Python 语言以其简洁、高效和强大的生态系统，成为了众多开发者和企业的首选。而 PyCharm，作为 JetBrains 倾力打造的专业 Python IDE，更是凭借其智能的代码辅助、强大的调试功能和丰富的插件生态…...

编程日记 2025/9/10 15:01:52

通过百度构建一个智能体

通过百度构建一个智能体直接可用，我不吝啬算力首先部署一个模型，我们选用deepseek14 构建智能体思考步骤，甚至多智能体； from openai import OpenAIclass Agent:def __init__(self, api_key, base_url, model...

编程日记 2025/8/16 11:36:01

【Maui】自定义统一色彩样式

文章目录前言一、问题描述二、解决方案三、软件开发（源码）3.1 消息扩展库3.2 样式的使用四、项目展示前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移动和桌面应用。使用 .NET MAUI，可…...

编程日记 2025/9/9 21:55:17

Swan 表达式 - 选择表达式

ANSYS Swan 表达式支持选择(selection)表达式 case, if/then/else。选择表达式根据特定的条件选择不同的分支流。 if/then/else 表达式 if/then/else 表达式的文法如下 if expr then expr else expr 其中，首个expr 的布尔表达式，若其为 true, 则返回 …...

编程日记 2025/9/9 10:49:02

关于深度学习的一份介绍

在这篇文章中，我将介绍有关深度学习的东西，主要是它与神经网络的关系、目前主要的网络有哪些，以及加深神经网络的意义等。一、联系在之前的文章中，我曾介绍过神经网络，而所谓的神经网络其实就是深度学习的一种架构…...

编程日记 2025/9/9 17:12:09

JAVA安全—手搓内存马

前言最近在学这个内存马，就做一个记录，说实话这个内存马还是有点难度的。什么是内存马首先什么是内存马呢，顾名思义就是把木马打进内存中。传统的webshell一旦把文件删除就断开连接了，而Java内存马则不同，它将恶…...

编程日记 2025/9/2 1:19:44

相关文章：