react实现图片切换
使用 useState 管理当前图片索引
在 React 中实现图片切换功能，可以通过 useState 钩子来管理当前显示的图片索引。初始化一个状态变量来保存当前图片的索引值，初始值通常设为 0。
const [currentImageIndex, setCurrentImageIndex] = useState(0);准备一个图片数组，包含所有需要切换的图片路径或 URL。这个数组可以来自 props、本地文件或 API 获取的数据。
const images = [
'image1.jpg',
'image2.jpg',
'image3.jpg'
];实现图片切换逻辑
创建两个函数分别处理上一张和下一张图片的切换。在这些函数中更新 currentImageIndex 状态，同时处理边界情况（如第一张图片时点击上一张跳到最后一张）。
const nextImage = () => {
setCurrentImageIndex((prevIndex) =>
prevIndex === images.length - 1 ? 0 : prevIndex + 1
);
};
const prevImage = () => {
setCurrentImageIndex((prevIndex) =>
prevIndex === 0 ? images.length - 1 : prevIndex - 1
);
};渲染图片和切换按钮
在组件中渲染当前图片，并添加按钮来触发切换功能。使用当前索引从图片数组中获取对应的图片进行显示。
return (
<div>
<button onClick={prevImage}>上一张</button>
<img
src={images[currentImageIndex]}
alt={`图片 ${currentImageIndex + 1}`}
/>
<button onClick={nextImage}>下一张</button>
</div>
);添加自动轮播功能
如果需要实现自动轮播效果，可以使用 useEffect 和 setInterval。在组件挂载时设置定时器，在组件卸载时清除定时器以避免内存泄漏。
useEffect(() => {
const interval = setInterval(() => {
nextImage();
}, 3000);
return () => clearInterval(interval);
}, []);添加过渡动画效果
为了提升用户体验，可以为图片切换添加 CSS 过渡动画。定义一个动画样式，并在图片元素上应用这个样式。
.fade-in {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}在 React 组件中为图片添加这个类名：
<img
className="fade-in"
src={images[currentImageIndex]}
alt={`图片 ${currentImageIndex + 1}`}
/>
