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的图片数组,超过父容器的区域被隐藏。

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

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

相关文章

10-Django项目--Ajax请求

目录 Ajax请求 简单示范 html 数据添加 py文件 html文件 demo_list.html Ajax_data.py 图例 Ajax请求 简单示范 html <input type"button" id"button-one" class"btn btn-success" value"点我"> ​ ​ <script>/…

模板进阶

非类型模板参数&#xff08;常量参数&#xff09; 相当于向类传递常量&#xff08;编译前确定&#xff09;参数 只能传整型/size_t&#xff0c;不可double等 C20 后可以支持其他内置类型&#xff08;可指针&#xff09; 自定义类型的实参永远不行 array 可理解为固定size的…

10倍速提升音乐制作,FL Studio21.2.9中文版揭秘!

FL Studio21中文版是数字音频工作站软件领域的一颗璀璨明星&#xff0c;它以强大的功能和直观的操作界面&#xff0c;赢得了音乐制作人和爱好者的广泛青睐。无论是专业音乐人还是初学者&#xff0c;都能通过这款软件探索和实现他们对音乐的创作和想象。本文将详细介绍FL Studio…

Ubuntu24.04 LTS安装中文输入法

前言 最近&#xff0c;windows玩没了&#xff0c;一怒之下决定换一个操作系统&#xff0c;当然就是最新的Ubuntu24.04 LTS.&#xff0c;其中魔法和咒语&#xff08;汉语&#xff09;是inux遇到的第一大难关&#xff0c;我权限不够教不了魔法&#xff0c;但我可以教你咒语(๑•…

Pycharm 添加内容根

解决问题&#xff1a;包未能被正常引入时

LeetCode746使用最小花费爬楼梯

题目描述 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。请你计算并返回达到楼梯顶部的最低花费。 解析 动态…

JVM运行数据区-Java堆

Java堆 堆区&#xff08;Heap区&#xff09;是JVM运行时数据区占用内存最大的一块区域&#xff0c;每一个JVM进程只存在一个堆区&#xff0c;它在JVM启动时被创建&#xff0c;JVM规范中规定堆区可以是物理上不连续的内存&#xff0c;但必须是逻辑上连续的内存。 1、堆区是线程…

R语言探索与分析17-CPI的分析和研究

一、选题背景 CPI&#xff08;居民消费价格指数&#xff09;作为一个重要的宏观经济指标&#xff0c;扮演着评估通货膨胀和居民生活水平的关键角色。在湖北省这个经济活跃的地区&#xff0c;CPI的波动对于居民生活、企业经营以及政府宏观经济政策制定都具有重要的影响。因此&a…

【MATLAB】概述1

非 ~ 注释 % 定义 >> 数组 赋值 赋值&#xff1a;>> x1 函数 数组 x[x1,x2] 行向量&#xff08;&#xff0c;or ) x[x1;x2] 列向量 x. 转置等间隔向量 1-10 向量&#xff1a;>>xlinspace(1,10,10) 矩阵 矩阵&#xff1a;>>A[1,2,3;4,5,6;7,8,9] …

容器中运行ip addr提示bash: ip: command not found【笔记】

容器中运行ip addr提示bash: ip: command not found 原因没有安装ip命令。 rootdocker-desktop:/# ip addr bash: ip: command not found rootdocker-desktop:/# apt-get install -y iproute2

设计模式20——职责链模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 职责链模式&#xff08;Chain …

使用耳机,如何避免听力受损?

使用耳机&#xff0c;如何避免听力受损&#xff1f; 随着数字时代生活方式的改变&#xff0c;无线耳机近年来成为消费者智慧生活的新宠。不少人会在上班通勤的路上习惯性地戴上耳机&#xff0c;打开播客或聆听音乐。工作中戴上耳机视频会议。午休的时候戴上耳机看视频。但你知…

设计模式23——状态模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 状态模式&#xff08;State&am…

【场景题】如何排查CPU偏高的问题

为了解决CPU偏高的问题&#xff0c;我们首先看一下每一个进程的CPU占用情况&#xff0c;使用命令Top 可以看见是进程id为2266的进程里面的java程序&#xff0c;占用了CPU90%使用情况 所以我们需要找到是哪一个代码导致的这样的情况&#xff0c;由于代码是线程执行的&#xff…

Three.js 研究:4、创建设备底部旋转的科技感圆环

1、实现效果 2、PNG转SVG 2.1、原始物料 使用网站工具https://convertio.co/zh/png-svg/进行PNG转SVG 3、导入SVG至Blender 4、制作旋转动画 4.1、给圆环着色 4.2、修改圆环中心位置 4.3、让圆环旋转起来 参考一下文章 Three.js 研究&#xff1a;1、如何让物体动起来 Thre…

解决 DataGrip 2024.1.3 连接 Tdengine 时timestamp字段显示时区不正确问题

设置中找到该设置&#xff0c;将原来的设置 yyyy-MM-dd HH:mm:ss 修改为: yyyy-MM-dd HH:mm:ss.SSS z 即可。 注意&#xff1a;只能修改第一个,修改后提示错误&#xff0c;但是查询数据时能成功格式化时间&#xff0c;修改第二个不生效&#xff0c;可能是 bug 具体格式见: Date…

macOS上用Qt creator编译并跑shotcut

1 简介 Shotcut是一个开源的跨平台的视频编辑软件&#xff0c;支持WIN/MACOS/LINUX等平台&#xff0c;由于该项目的编译较为麻烦&#xff0c;踩坑几许&#xff0c;因此写此文章记录完整编译构建过程&#xff0c;后续按此法编译&#xff0c;可减少走弯路&#xff0c;提高生产力。…

软件质量保障——三、四

三、黑盒测试 1.黑盒测试概述 1.1 如何理解黑盒测试&#xff1f; 1.2 黑盒测试有什么特点&#xff1f; 1.3 如何实施黑盒测试&#xff1f; 2. 黑盒测试用例设计和生成方法&#xff08;这里还是要自己找题做&#xff09; 2.1 等价类划分法 步骤&#xff1a; 1.选择划分准…

亚信安慧AntDB数据库与华为数据存储完成兼容性互认证

迎接数智时代&#xff0c;供给核心科技。日前&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧&#xff09;与华为技术有限公司&#xff08;简称&#xff1a;华为&#xff09;&#xff0c;完成了AntDB数据库产品与OceanProtect备份一体机及Oceanstor…

python学习笔记-04

高级数据类型 一组按照顺序排列的值称为序列&#xff0c;python中存在三种内置的序列类型&#xff1a;字符串、列表和元组。序列可以支持索引和切片的操作&#xff0c;第一个索引值为0表示从左向右找&#xff0c;第一个索引值为负数表示从右找。 1.字符串操作 1.1 切片 切片…