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

React - 实现走马灯组件

一、实现效果

二、源码分析

import {useRef, useState} from "react";export const Carousel = () => {const images = [{id: 3, url: 'https://sslstage3.sephorastatic.cn/products/2/4/6/8/1/6/1_n_new03504_100x100.jpg'}, {id: 1, url: 'https://sslstage2.sephorastatic.cn/products/2/4/5/3/5/8/1_n_new03504_100x100.jpg'}, {id: 2, url: 'https://sslstage1.sephorastatic.cn/products/2/4/5/2/8/2/1_n_new03504_100x100.jpg'}];const [index, setIndex] = useState(0);const refreshInterval = useRef(null)if (refreshInterval.current === null) {refreshInterval.current = setInterval(() => setIndex(val => (val + 1) % images.length), 3000)}const containerStyle = {width: '100px', height: '100px', overflow: "hidden", border: '1px solid red',}const imageStyle = {width: 100 * images.length + 'px',transition: 'transform 1.5s ease',position: 'relative',left: -1 * index * 100 + 'px',}return (<div><div style={containerStyle}><div style={imageStyle}>{images.map(item =><div style={{display: 'inline-block'}}><img width={100} height={100} key={item.id} src={item.url} alt='product'/></div>)}</div></div><div><button onClick={() => setIndex(val => (val - 1) % images.length)}>pre</button>{index + 1}<button onClick={() => setIndex(val => (val + 1) % images.length)}>next</button></div></div>)
}

        本文给的代码是基于定位实现,父容器是显示区域,子容器是inline的图片数组,超过父容器的区域被隐藏。

相关文章:

React - 实现走马灯组件

一、实现效果 二、源码分析 import {useRef, useState} from "react";export const Carousel () > {const images [{id: 3, url: https://sslstage3.sephorastatic.cn/products/2/4/6/8/1/6/1_n_new03504_100x100.jpg}, {id: 1, url: https://sslstage2.sephor…...

【学习笔记】Windows GDI绘图(十三)动画播放ImageAnimator(可调速)

文章目录 前言定义方法CanAnimate 是否可动画显示Animate 动画显示多帧图像UpdateFramesStopAnimate终止动画Image.GetFrameCount 获取动画总帧数Image.GetPropertyItem(0x5100) 获取帧延迟 自定义GIF播放(可调速) 前言 在前一篇文章中用到ImageAnimator获取了GIF动画的一些属…...

fps游戏如何快速定位矩阵

fps游戏如何快速定位矩阵 矩阵特点: 1、第一行第一列值的范围在**-1 ---- 1**之间&#xff0c;如果开镜之后值会变大。 2、第一行第三列的值始终为 0。 3、第一行第四列 的值比较大 &#xff0c; >300或者**<-300**。 根据这三个特点&#xff0c;定位矩阵已经足够了…...

【机器学习基础】Python编程06:五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言,它在机器学习领域中的重要性主要体现在以下几个方面: 简洁易学:Python语法简洁清晰,易于学习,使得初学者能够快速上手机器学习项目。 丰富的库支持:Python拥有大量的机器学习库,如scikit-learn、TensorFlow、Keras和PyTorch等,这些…...

R可视化:生存分析森林图

在R语言中,使用forestplot包来绘制生存分析的森林图是一个专业且直观的方式来展示各种风险因素或治疗对生存结果的影响。森林图(Forest Plot)常用于展示多项研究的效应量和其可信区间,尤其在生存分析中,它可以清晰地显示不同变量或因素对生存时间的影响程度和统计显著性。…...

一个 python+tensorFlow训练1万张图片分类的简单直观例子( 回答由百度 AI 给出 )

问题&#xff1a;给定一个文件夹 train_images&#xff0c;里面有10000张30*30像素的灰度值图片&#xff0c;第1~第10000张图片的名称分别为 00001.png、 00002.png、... 09999.png、10000.png,train_images 下面还有一个 image_category_map.txt文件&#xff0c; 文件的内容…...

DBeaver无法连接Clickhouse,连接失败

DBeaver默认下载的是0.2.6版本的驱动&#xff0c;但是一直连接失败&#xff1a; 报错提示 解决办法 点击上图中的Open Driver Configuration点击库 - 重置为默认状态在弹出的窗口中修改驱动版本号为0.2.4或者其他版本&#xff08;我没有试用过其他版本&#xff09;&#xff0…...

python基础实例

下一个更大的数 定义一个Solution类&#xff0c;用于实现next_great方法 class Solution: def next_great(self, nums1, nums2): # 初始化一个空字典answer&#xff0c;用于存储答案 answer {} # 初始化一个空列表stack&#xff0c;用于存储待比较的数字 stack [] # 遍历nu…...

ADASIS V2 协议-1

ADAS V2协议-1 1 简介2 版本控制3 ADASIS v23.1 ADASIS v2 Horizon &#xff08;地平线&#xff09;3.2 ADASIS v2的构建3.3 ADASIS v2 Horizon Provider &#xff08;ADAS V2地平线提供者&#xff09;3.4 paths and offsets &#xff08;路径和偏移量&#xff09;3.5 Path Pro…...

人工智能安全风险分析及应对策略

文│中国移动通信集团有限公司信息安全管理与运行中心 张峰 江为强 邱勤 郭中元 王光涛 人工智能&#xff08;AI&#xff09;是引领新一轮科技革命和产业变革的关键技术。人工智能赋能网络安全的同时&#xff0c;也会带来前所未有的安全风险。本文在介绍人工智能技术赋能网络安…...

Python驱动下的AI革命:技术赋能与案例解析

在当今这个信息化、数据化的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为推动社会发展的重要力量。而Python&#xff0c;作为一种简单易学、功能强大的编程语言&#xff0c;在AI领域的应用中发挥着至关重要的作用。本文将探讨Python在AI领域的应用、其背后的技…...

JavaScrip轮播图

前言 在网页设计中&#xff0c;轮播图&#xff08;Carousel&#xff09;已经成为一种常见的元素&#xff0c;用于展示一系列的图片或内容卡片。它们不仅能够吸引用户的注意力&#xff0c;还能节省空间&#xff0c;使得用户可以在有限的空间内获得更多的信息。今天&#xff0c;我…...

达梦8 网络中断对系统的影响

测试环境&#xff1a;三节点实时主从 版本&#xff1a;--03134283938-20221019-172201-20018 测试1 系统没有启动确认监视器 关闭节点3网卡 登录节点1检查主库状态 显示向节点2发送归档成功&#xff0c;但无法收到节点3的消息&#xff0c;节点1挂起 日志报错如下&#xf…...

OpenAI发布GPT-4思维破解新策略,Ilya亦有贡献!

OpenAI正在研究如何破解GPT-4的思维&#xff0c;并公开了超级对齐团队的工作&#xff0c;Ilya Sutskever也在作者名单中。 论文地址&#xff1a;https://cdn.openai.com/papers/sparse-autoencoders.pdf 代码&#xff1a;https://github.com/openai/sparse_autoencoder 特征可…...

[消息队列 Kafka] Kafka 架构组件及其特性(二)Producer原理

这边整理下Kafka三大主要组件Producer原理。 目录 一、Producer发送消息源码流程 二、ACK应答机制和ISR机制 1&#xff09;ACK应答机制 2&#xff09;ISR机制 三、消息的幂等性 四、Kafka生产者事务 一、Producer发送消息源码流程 Producer发送消息流程如上图。主要是用…...

faiss ivfpq索引构建

假设已有训练好的向量值&#xff0c;构建索引&#xff08;nlist和随机样本按需选取&#xff09; import numpy as np import faiss import pickle from tqdm import tqdm import time import os import random# 读取嵌入向量并保留对应关系 def read_embeddings(directory, ba…...

ffmpeg视频编码原理和实战-(2)视频帧的创建和编码packet压缩

源文件&#xff1a; #include <iostream> using namespace std; extern "C" { //指定函数是c语言函数&#xff0c;函数名不包含重载标注 //引用ffmpeg头文件 #include <libavcodec/avcodec.h> } //预处理指令导入库 #pragma comment(lib,"avcodec.…...

数据结构:线索二叉树

目录 1.线索二叉树是什么&#xff1f; 2.包含头文件 3.结点设计 4.接口函数定义 5.接口函数实现 线索二叉树是什么&#xff1f; 线索二叉树&#xff08;Threaded Binary Tree&#xff09;是一种对普通二叉树的扩展&#xff0c;它通过在树的某些空指针上添加线索来实现更高效的遍…...

宝塔Linux面板-Docker管理(2024详解)

上一篇文章《宝塔Linux可视化运维面板-详细教程2024》,详细介绍了宝塔Linux面板的详细安装和配置方法。本文详细介绍使用Linux面板管理服务器Docker环境。 目录 1、安装Docker 1.1 在线安装 ​编辑 1.2 手动安装 1.3 运行状态 1.4 镜像加速 2 应用商店 3 总览 4 容器 …...

【Linux】进程(8):Linux真正是如何调度的

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解Linux进程&#xff08;8&#xff09;&#xff1a;Linux真正是如何调度的&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 之前我们讲过&#xff0c;在大…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…...