【前端】react+ts 轮播图的实现

一、场景描述

在很多网站的页面中都有轮播图，所以我想利用react.js和ts实现一个轮播图。自动轮播图已经在前面实现过了，如：https://blog.csdn.net/weixin_43872912/article/details/145622444?sharetype=blogdetail&sharerId=145622444&sharerefer=PC&sharesource=weixin_43872912&spm=1011.2480.3001.8118。
思维导图可以在网站：https://download.csdn.net/download/weixin_43872912/90429355?spm=1001.2014.3001.5503下载高清原图。
在这里插入图片描述

二、问题拆解

轮播图（如下图轮播图所示）的实现可以分为三个：
第一个是自动轮播，就是每过一定的时间自动变成下一张图；
第二个是前后按钮的轮播，就是按左右的按钮，按左边的按钮时，跳转到前一张图，按右边的按钮时，跳转到后一张图。
第三个就是按底部的按钮切换轮播图。
在这里插入图片描述
在这里插入图片描述

三、相关知识

3.1 setTimeout与setInterval的用法与详解

setTimeout是指过了多久之后执行内部代码，一次性的；setInterval是每过多久就要执行一次代码。setTimeout里面开启计时器的话，就需要先过setTimeout的时间，然后过setInterval的一次时间才会运行第一次。

    var time = 0;setInterval(() => {time += 1;console.log("当前时间为" + time + "秒");}, 1000);let count = 0;//test setTimeout & setIntervalvar testTimeFunction = function () {setTimeout(() => {setInterval(() => {count += 1;console.log("count输出了" + count + "次");}, 3000);}, 3000);};testTimeFunction();

运行结果如下图所示：
在这里插入图片描述

3.2 react中的ref，利用ref获取dom元素，并对dom元素的class进行操作

import React, { useState, useRef } from "react”;const divRef = useRef<HTMLDivElement>(null);
//tsx部分
<div ref={divRef}><buttononClick={() => {console.log(divRef);let target = divRef.current as HTMLElement;  //ts里面要将其定义为htmlElement再操作target.classList.add("preActive");console.log(target);}}>打印ref</button>
</div>

四、轮播图的按钮部分实现

4.1 上一张和下一张的按钮实现

在这里插入图片描述
上一张和下一张的按钮部分其实就是自动轮播部分的手动操作，这部分的内容关注一下自动轮播部分和手动轮播部分的联动就可以了。
按钮事件：
跳转的按钮事件， 可以看到其实就是设置了一下currentIndex，这是一个state，更新之后会引起组件渲染，然后就会更新dom元素的class。

//跳转到上一张图的按钮事件。
<buttonclassName="carousel-control-prev"type="button"data-bs-target="#carouselExample"onClick={() => {//clearCrouselClass();setCurrentIndex((pre) => {let nowCurrentIndex =currentIndex.currentIndex - 1 === -1? img.length - 1: currentIndex.currentIndex - 1;let nowPreIndex =nowCurrentIndex - 1 === -1? img.length - 1: nowCurrentIndex - 1;let nownextIndex =nowCurrentIndex + 1 === img.length ? 0 : nowCurrentIndex + 1;return {preIndex: nowPreIndex,currentIndex: nowCurrentIndex,nextIndex: nownextIndex,};});}}
>
//跳转到下一张图的按钮事件。
<buttonclassName="carousel-control-next"type="button"data-bs-target="#carouselExample"onClick={() => {//clearCrouselClass();setCurrentIndex((pre) => {let nowCurrentIndex =currentIndex.currentIndex + 1 === img.length? 0: currentIndex.currentIndex + 1;let nowPreIndex =nowCurrentIndex - 1 === -1? img.length - 1: nowCurrentIndex - 1;let nownextIndex =nowCurrentIndex + 1 === img.length ? 0 : nowCurrentIndex + 1;return {preIndex: nowPreIndex,currentIndex: nowCurrentIndex,nextIndex: nownextIndex,};});}}
>

手动换图与自动轮播图之间的不和谐在于，手动换图后自动轮播还在执行会导致换两次可能，所以手动换图的时候需要停止自动轮播，结束后开启。
换图每次都会伴随着cunrrentIndex的变动，所以在这里我们用useEffect去检测cunrrentIndex的变化，只要变化就停止计时器，然后重新开启。 — 这里我用了异步

 //开启计时器，设置preIndex是当前index的前一个index（index-1），nextIndex是index+1const startAutoplay = async () => {interval.current = setInterval(() => {setCurrentIndex((preCurrentIndex) => {return {preIndex:((preCurrentIndex.currentIndex + 1) % img.length) - 1 === -1? img.length - 1: ((preCurrentIndex.currentIndex + 1) % img.length) - 1,currentIndex: (preCurrentIndex.currentIndex + 1) % img.length,nextIndex:((preCurrentIndex.currentIndex + 1) % img.length) + 1 === img.length? 0: ((preCurrentIndex.currentIndex + 1) % img.length) + 1,};});}, 3000);};const stopAutoPlay = () => {if (interval.current !== null) {clearInterval(interval.current as NodeJS.Timeout);interval.current = null;}};  useEffect(() => {clearInterval(interval.current as NodeJS.Timeout);interval.current = null;let target = imgRef.current as HTMLElement;console.log(target.childNodes);if (interval.current !== null) {stopAutoPlay();}if (interval.current === null) {   //避免因为定时器什么的缘故导致计时器多开startAutoplay();}//eslint-disable-next-line react-hooks/exhaustive-deps}, [currentIndex]);

4.2 底部小圆点按钮

这块部分就是将点击按钮所对应的图片转到主页。这个要实现用setCurrentIndex()就可以，但是要加动画，首先需要将目标页先移到上一页或者下一页的位置，准备平移至主页位置。所以，需要预先将目标图移到动画的起始位置。
在这里插入图片描述
如上图所示，如果是目标页是当前页的前面几页（目标页的index比currentIndex小）。需要提前把目标页移到上一页的位置，反之，移到下一页的位置。
移完之后设置currentIndex进行重新渲染。

if (index < currentIndex.currentIndex) {target.classList.add("preActive”);        //移到上一页的位置，class设为preActive// target1.classList.add("nextActive");// target1.classList.remove("active");setTimeout(() => {setCurrentIndex((pre) => {console.log(currentIndex);// let nextIndex = index + 1 === img.length ? 0 : index + 1;// if(nextIndex === pre.currentIndex) return;return {preIndex:index - 1 === -1 ? img.length - 1 : index - 1,currentIndex: index,nextIndex: pre.currentIndex,};});}, 10);
} else if (index > currentIndex.currentIndex) {target.classList.add("nextActive”);     //移到下一页的位置，class设为nextActive// target1.classList.add("preActive");// target1.classList.remove("active");console.log(currentIndex);setTimeout(() => {setCurrentIndex((pre) => {return {nextIndex:index + 1 === img.length ? 0 : index + 1,currentIndex: index,preIndex: pre.currentIndex,};});}, 10);
}

到此为止出现的问题：
和“自动轮播和前后按钮换图”之前的联动出现的错误是：当跳到前面页面的时候，下一页的类名没有nextActive所以跳到下一页可能没有动画；相同的跳到前面页的时候，上一页的类名没有preActive，可能没有翻页动画。因此，我们要保证当前页的前一页类名有preActive，后一页类名有nextActive.

<div
key={index}
className={`carousel-item ${index === currentIndex.currentIndex ? "active" : ""
}${index ===(currentIndex.currentIndex - 1 === -1? img.length - 1: currentIndex.currentIndex - 1) ||(index === currentIndex.preIndex )? "preActive": ""
} ${index ===(currentIndex.currentIndex + 1 === img.length? 0: currentIndex.currentIndex + 1) ||index === currentIndex.nextIndex? "nextActive": ""
}`}
>

这样写存在的错误是会造成同一个图片有preActive和nextActive的情况
在这里插入图片描述
解决方案：按键跳转前的主页是目标页的下一页：因此，当preIndex等于currentIndex+1不给preIndex

<div
key={index}
className={`carousel-item ${index === currentIndex.currentIndex ? "active" : ""
}${index ===(currentIndex.currentIndex - 1 === -1? img.length - 1: currentIndex.currentIndex - 1) ||//下面这部分代码就是 当preIndex等于currentIndex+1不给preIndex(index === currentIndex.preIndex &&currentIndex.preIndex !==(currentIndex.currentIndex + 1 === img.length? 0: currentIndex.currentIndex + 1))? "preActive": ""
} ${index ===(currentIndex.currentIndex + 1 === img.length? 0: currentIndex.currentIndex + 1) ||index === currentIndex.nextIndex? "nextActive": ""
}`}
>

在这里插入图片描述
五、遇到的问题

    useEffect(() => {console.log("停止计时器");console.log(currentIndex);clearInterval(interval.current as NodeJS.Timeout);interval.current = null;let target = imgRef.current as HTMLElement;console.log(target.childNodes);if (interval.current !== null) {stopAutoPlay();}//如果这里这样写会出现问题，如果在这三秒内点的话，就会导致setCurrentIndex的值都变成NaNsetTimeout(()=>{if (interval.current === null) {startAutoplay();}},3000)//eslint-disable-next-line react-hooks/exhaustive-deps}, [currentIndex]);//改完之后的版本useEffect(() => {console.log("停止计时器");console.log(currentIndex);clearInterval(interval.current as NodeJS.Timeout);interval.current = null;let target = imgRef.current as HTMLElement;console.log(target.childNodes);if (interval.current !== null) {stopAutoPlay();}
//改成异步函数，或者setTimeout的事件变短一点if (interval.current === null) {startAutoplay();}//eslint-disable-next-line react-hooks/exhaustive-deps}, [currentIndex]);

整个项目可以在下面链接下载：https://download.csdn.net/download/weixin_43872912/90429357?spm=1001.2014.3001.5501

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/70776.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python与C系列语言的差异总结（4）

python与C系列语言的差异总结（4）

如果具有传统编译型语言的经验&#xff0c;大家可能会对是否使用字典而犹豫不决&#xff0c;担心字典的效率比列表或数组低。事实上Python字典的执行速度已经相当快了。Python语言的许多内部特性都依赖于字典&#xff0c;为提高字典的效率已经投入了大量的心血。Python的所有数…
阅读更多...
[Web 安全] 反序列化漏洞 - 学习笔记

[Web 安全] 反序列化漏洞 - 学习笔记

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] Web 安全攻防 - 学习手册-CSDN博客 0x01&#xff1a;反序列化漏洞 — 漏洞介绍 反序列化漏洞是一种常见的安全漏洞&#xff0c;主要出现在应用程序将 序列化数据 重新转换为对象&#xff08;即反序列化&#xff09;的过程中…
阅读更多...
深入理解C语言中的位段

深入理解C语言中的位段

在C语言编程中&#xff0c;我们常常会遇到需要对内存进行精细控制的场景&#xff0c;位段&#xff08;bit - field&#xff09;便是C语言提供的一种强大工具&#xff0c;它允许我们在一个字节或多个字节内对数据进行按位的定义和操作&#xff0c;极大地提高了内存使用效率。 一…
阅读更多...
实现使用RBF（径向基函数）神经网络模拟二阶电机数学模型中的非线性干扰，以及使用WNN（小波神经网络）预测模型中的非线性函数来抵消迟滞影响的功能

实现使用RBF（径向基函数）神经网络模拟二阶电机数学模型中的非线性干扰，以及使用WNN（小波神经网络）预测模型中的非线性函数来抵消迟滞影响的功能

下面将详细介绍如何实现使用RBF&#xff08;径向基函数&#xff09;神经网络模拟二阶电机数学模型中的非线性干扰&#xff0c;以及使用WNN&#xff08;小波神经网络&#xff09;预测模型中的非线性函数来抵消迟滞影响的功能。我们将按照以下步骤进行&#xff1a; 步骤1&#x…
阅读更多...
Grouped-Query Attention（GQA）详解: Pytorch实现

Grouped-Query Attention（GQA）详解: Pytorch实现

Grouped-Query Attention&#xff08;GQA&#xff09;详解 Grouped-Query Attention&#xff08;GQA&#xff09; 是 Multi-Query Attention&#xff08;MQA&#xff09; 的改进版&#xff0c;它通过在 多个查询头&#xff08;Query Heads&#xff09;之间共享 Key 和 Value&am…
阅读更多...
ReentrantLock 用法与源码剖析笔记

ReentrantLock 用法与源码剖析笔记

&#x1f4d2; ReentrantLock 用法与源码剖析笔记 &#x1f680; 一、ReentrantLock 核心特性 &#x1f504; 可重入性&#xff1a;同一线程可重复获取锁&#xff08;最大递归次数为 Integer.MAX_VALUE&#xff09;&#x1f527; 公平性&#xff1a;支持公平锁&#xff08;按等…
阅读更多...
基于GO语言的车牌识别api技术-港澳车牌文字识别

基于GO语言的车牌识别api技术-港澳车牌文字识别

随着科技的飞速发展&#xff0c;智能化管理逐渐渗透到我们生活的方方面面。车牌识别技术作为智能交通的重要组成部分&#xff0c;不仅极大提升了交通管理的效率&#xff0c;还为市民出行带来了更多便利。而港澳地区的车牌识别技术&#xff0c;凭借其高效、精准、快速的特点&…
阅读更多...
基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

写在前面 博文内容涉及 基于 Deepseek LLM 的本地知识库搭建使用 ollama 部署 Deepseek-R1 LLM知识库能力通过 Ragflow、Dify 、AnythingLLM、Cherry 提供理解不足小伙伴帮忙指正 &#x1f603;,生活加油 我站在人潮中央&#xff0c;思考这日日重复的生活。我突然想&#xff0c…
阅读更多...
PCB设计常用布局布线方法

PCB设计常用布局布线方法

PCB设计常用布局布线方法 **1.模块化布局&#xff0c;**先放大器件再放小器件。 立创在原理图框完后&#xff0c;在PCB快捷shiftp 2.布局对齐美观 3.重要信号线优先处理 分类再画 4.减少Stub布线&#xff1a;就是避免为连接的线段&#xff0c;防止产生“天线效应”&#xff…
阅读更多...
Mac 版 本地部署deepseek ➕ RAGflow 知识库搭建流程分享（附问题解决方法）

Mac 版 本地部署deepseek ➕ RAGflow 知识库搭建流程分享（附问题解决方法）

安装&#xff1a; 1、首先按照此视频的流程一步一步进行安装&#xff1a;(macos版&#xff09;ragflowdeepseek 私域知识库搭建流程分享_哔哩哔哩_bilibili 2、RAGflow 官网文档指南&#xff1a;https://ragflow.io 3、RAGflow 下载地址&#xff1a;https://github.com/infi…
阅读更多...
娛閑放鬆篇2

娛閑放鬆篇2

最近看了好多動畫和以前的新聞&#xff0c;都挺有想法&#xff0c;可以了解一下 有些是N年前的&#xff0c;希望見怪莫怪 若說如何用最小作用量去理解世界觀的話&#xff0c;其實就是書&#xff0c;以動畫的角度來看&#xff0c;日本動畫足以 一.高達系列 一系列的利用巨大…
阅读更多...
OpenIPC开源FPV之Adaptive-Link安装

OpenIPC开源FPV之Adaptive-Link安装

OpenIPC开源FPV之Adaptive-Link安装 1. 源由2. 介绍2.1 天空端安装2.2 地面端安装 3. 问题汇总3.1 安装脚本问题3.2 网络安装问题3.3 非SSC30KQ/SSC338Q硬件3.4 代码疑问 4. 总结5. 后续 1. 源由 鉴于飞行过程&#xff0c;发现一些马赛克现象&#xff0c;且60FPS桌面30FPS的录…
阅读更多...
解析第十一页

解析第十一页

多选707、如图所示组网，SWA、SWB、SWC、SWD运行RSTP,则以下说法正确的是? A、可以在SWB的GE0/0/2端口开启边缘端口，让连接终端的接口快速进入转发状态 B、边缘端口收到BPDU之后会重新参与生成树的计算 C、可以在SWC的GEO/0/2端口开启边缘端口，让连接终端的接口快速进入转…
阅读更多...
禾迈电力电子嵌入式面经和参考答案

禾迈电力电子嵌入式面经和参考答案

CMakeLists 怎么写？ CMakeLists.txt 是 CMake 构建系统的配置文件，用于描述项目的构建规则和依赖关系。以下是一个简单的 CMakeLists.txt 示例及基本写法说明。 首先，指定 CMake 的最低版本要求，例如cmake_minimum_required(VERSION 3.10)。 然后，定义项目名称，如project…
阅读更多...
我的AI工具箱Tauri版-FluxCharacterGeneration参考图像生成人像手办（Flux 版）

我的AI工具箱Tauri版-FluxCharacterGeneration参考图像生成人像手办（Flux 版）

本教程基于自研的AI工具箱Tauri版进行ComfyUI工作流FluxCharacterGeneration参考图像生成人像手办&#xff08;Flux 版&#xff09;。 我的AI工具箱Tauri版 - FluxCharacterGeneration参考图像生成人像手办&#xff08;Flux版&#xff09; 基于先进的FLUX模型&#xff0c;通过…
阅读更多...
什么是DrawCall？DrawCall为什么会影响游戏运行效率？如何减少DrawCall？

什么是DrawCall？DrawCall为什么会影响游戏运行效率？如何减少DrawCall？

目录 1 什么是DrawCall&#xff1f; 2 DrawCall为什么会影响游戏运行效率&#xff1f; 3 如何减少 DrawCall&#xff1f;&#xff08;结合性能分析工具&#xff09; 1 什么是DrawCall&#xff1f; DrawCall&#xff08;绘制调用&#xff09; 是 GPU 的一个指令&#xff0c…
阅读更多...
深入解析提示词：从基础到结构化应用

深入解析提示词：从基础到结构化应用

在人工智能蓬勃发展的当下&#xff0c;提示词&#xff08;Prompt&#xff09;扮演着至关重要的角色。无论是在与聊天机器人交流&#xff0c;还是驱动复杂智能体完成任务&#xff0c;精准且高效的提示词都能起到事半功倍的效果。本文将带你全面了解提示词&#xff0c;深入探索结…
阅读更多...
【前端基础】Day 2 HTML

【前端基础】Day 2 HTML

目录 1.表格标签 2.列表标签 3.表单标签 4.综合案例 5.查阅文档 1.表格标签 <body><table align"center" border"1" cellpadding"0" cellspacing"0" width"500" height"100"><thead> …
阅读更多...
R与RStudio简介及安装

R与RStudio简介及安装

目录 一、R与RStudio关系 二、R简介 2.1. 发展历史 2.2. R语言特点 三、安装指南 3.1 R安装指南 3.2 R studio安装指南 一、R与RStudio关系 R是统计领域广泛使用的工具&#xff0c;属于GNU系统的一个自由、免费、源代码开放的软件&#xff0c;是 用于统计计算和统计绘图…
阅读更多...
20分钟 Bash 上手指南

20分钟 Bash 上手指南

文章目录 bash 概念与学习目的第一个 bash 脚本bash 语法变量的使用位置参数管道符号&#xff08;过滤条件&#xff09;重定向符号条件测试命令条件语句case 条件分支Arrayfor 循环函数exit 关键字 bash 脚本记录历史命令查询文件分发内容 bash 概念与学习目的 bash&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023