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.mzph.cn/diannao/22561.shtml

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

相关文章

芒果YOLOv8改进171:无 NMS 训练的一致双重分配|即插即用,双标签分配策略改进

💡🚀🚀🚀本博客 无 NMS 训练的一致双重分配|即插即用,双标签分配策略改进 源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 文章目录 即插即用|无 NMS 训练的一致双重分配|双标签分配策略 + 最新改进 YOLOv8 代码改进论文理论论文贡献YOLOv8 + 无 NMS 训…

RabbitMQ docker安装及使用

1. docker安装RabbitMQ docker下载及配置环境 docker pull rabbitmq:management # 创建用于挂载的目录 mkdir -p /home/docker/rabbitmq/{data,conf,log} # 创建完成之后要对所创建文件授权权限&#xff0c;都设置成777 否则在启动容器的时候容易失败 chmod -R 777 /home/doc…

团队项目开发使用git工作流(IDEA)【精细】

目录 开发项目总体使用git流程 图解流程 1.创建项目仓库[组长完成] 2. 创建项目&#xff0c;并进行绑定远程仓库【组长完成】 3.将项目与远程仓库&#xff08;gitee&#xff09;进行绑定 3.1 创建本地的git仓库 3.2 将项目添加到缓存区 3.3 将项目提交到本地仓库&#…

102、python-第三阶段-11-数据输出-输出到文件中

配置完成后&#xff0c;再次执行代码&#xff0c;发现输出的文件有好多&#xff0c;和电脑的内核数量有关系 这样就可以分别输出到一个对应的文件了

攻防世界---misc---normal_png

1、下载附件是一张图片 2、先看这张照片&#xff0c;我感觉它的宽高不一样&#xff0c;感觉有问题&#xff0c;但是我也没深想 3、接着用winhex分析&#xff0c;也没有发现奇怪的地方&#xff0c;于是我去binwalk&#xff0c;没什么发现&#xff0c;就是一张正常的图片&#x…

【Vue】Vue生命周期

Vue生命周期&#xff1a;就是一个Vue实例从创建&#xff08;new一个Vue实例&#xff09; 到 销毁&#xff08;关闭网页&#xff09; 的整个过程。 生命周期四个阶段&#xff1a;① 创建 ② 挂载 ③ 更新 ④ 销毁 创建阶段&#xff1a;创建响应式数据 通过data给当前的Vue实例提…

树莓集团:产学研一体化发展

树莓集团&#xff0c;通过与高校、研究机构等合作&#xff0c;旨在促进科技成果的转化和应用&#xff0c;提高技术创新能力&#xff0c;实现经济社会可持续发展。深刻认识产学研一体化对于推动产业创新、提升竞争力的关键作用。 1、与高校合作 紧密合作&#xff1a;树莓集团与…

Day08 备忘录页面设计

​ 当前章节完成后效果图 一.布局设计和生成静态数据 当前章节备忘录页面布局设计跟 第7章节一样,只是内容方面发生变化,其他样式都一样。直接把代码粘出来了当前章节备忘录 MemoView.xaml 页面完整示例代码 <UserControl x:Class="MyToDo.Views.MemoView"xmlns…

【Vue】watch - 完整写法

完整写法 → 添加额外配置项 deep: true 对复杂类型深度监视immediate: true 初始化立刻执行一次handler方法 使用场景&#xff1a;一个结果需要通过多个条件来查询控制&#xff0c;这个时候通常会把这些查询条件丢到一个对象里&#xff0c;此时对象里的所有属性我们都需要监…

深入解析力扣178题:分数排名(DENSE_RANK详解及模拟面试问答)

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 在本篇文章中&#xff0c;我们将详细解读力扣第178题“分数排名”。通过学习本篇文章&#xff0c;读者将掌握如何使用SQL语句来解决这一问题&#xff0c;并了解相关的复杂度分析…

Python | 刷题日记

1.海伦公式求三角形的面积 area根号下&#xff08;p(p-a)(p-b&#xff09;(p-c)) p是周长的一半 2.随机生成一个整数 import random xrandom.randint(0,9)#随机生成0到9之间的一个数 yeval(input("please input:")) if xy:print("bingo") elif x<y:pri…

python数据分析——逻辑回归

参考资料&#xff1a;活用pandas库 逻辑回归 当响应变量为二值响应变量时&#xff0c;经常使用逻辑回归对数据建模。 # 导入pandas库 import pandas as pd # 导入数据集 acspd.read_csv(r"...\data\acs_ny.csv") # 展示数据列 print(acs.columns) # 展示数据集 pri…

[数据集][图像分类]茶叶叶子病害分类数据集304张4类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;304 分类类别数&#xff1a;4 类别名称:[“anthracnose”,“bird_eye_spot”…

功效系数法

功效系数法&#xff08;Efficacy Coefficient Method&#xff09;是一种综合评价方法&#xff0c;它根据多目标规划的原理&#xff0c;对每个评价指标确定一个满意值和不允许值&#xff0c;以满意值为上限&#xff0c;以不允许值为下限。计算各指标实现满意值的程度&#xff0c…

阿里云 动态ddns

环境 nodejs版本不低于10.16 系统window&#xff0c;centos 均可 package.json {"name": "aliyun-ddns","version": "2.1.0","main": "ddns.js","scripts": {"start": "node ddns.js&…

ant-design vue3 中上传图片组件的回传图片显示问题

最近在做web端的上传图片 有一个数据列表中的编辑功能 是之前上传的图片 点击编辑进入编辑页面 会显示之前写的数据 现在需要把原来上传的图片 显示出来 因为之前给后端上传的 图片格式 是一个数组 ["图片链接"&#xff0c;“图片链接”。。。] 后端给我返回的数据也…

ESP32 ESP8266 Arduino开发环境离线安装

在下面链接中详细介绍了ESP32 ESP8266在线安装方法&#xff0c; 智能红外遥控器&#xff08;二&#xff09;&#xff1a; Arduino环境搭建及库安装_arduino ide 1.8.13-CSDN博客 但是由于在线安装受国外服务器的影响很多时间会不成功&#xff0c;下面介绍使用离线安装包的方法…

AI视频教程下载:给初学者的ChatGPT提示词技巧

你是否厌倦了花费数小时在可以通过强大的语言模型自动化的琐碎任务上&#xff1f;你是否准备好利用 ChatGPT——世界上最先进的语言模型——并将你的生产力提升到下一个水平&#xff1f; ChatGPT 是语言处理领域的游戏规则改变者&#xff0c;它能够理解并响应自然语言&#xf…

机器学习ML.NET

适用于 .NET 的机器学习 ML.NET 是用于 .NET 的跨平台开源机器学习 (ML) 框架。 ML.NET 允许开发人员在其 .NET 应用程序中轻松构建、训练、部署和使用自定义模型,而无需开发机器学习模型的专业知识或使用 Python 或 R 等其他编程语言的经验。该框架提供从文件和数据库加载…

学习笔记 SD卡(1)

SD:Secure Digital Card 安全数据卡 本质&#xff1a;nand flash 控制芯片 SD卡三种系列&#xff1a;SD卡&#xff08;FULL SIZE&#xff09;MINISD卡 MicroSD卡 特点&#xff1a;容量大 高安全性 体积小 传输速度快 接口简单 SD卡储存容量等级 SD卡类型协议规范文件系统…