React图片滑块如何添加切换过渡动画及图片叠加文字

先修正原有代码的基础逻辑问题：原代码中setCounter是状态更新函数，不能直接赋值；原有索引边界判断逻辑有误，优化后支持首尾循环切换。 #

两个需求的实现方案 #

1. 图片切换过渡动画实现 #

采用层叠+透明度过渡方案实现无闪烁淡入淡出效果，实现逻辑：

• 给滑块设置固定尺寸的相对定位容器，所有图片绝对定位铺满容器，默认完全透明
• 给CSS的opacity属性加transition过渡规则，当前激活的图片设置透明度为1、层级提高，切换时自动触发过渡动画
• 如果需要左右滑动效果，只需要把过渡属性从opacity改成transform: translateX()即可

2. 图片叠加对应文字实现 #

把原纯图片地址的数组重构为对象数组，每个数组项同时存储图片资源、对应展示的文字、标题等内容，文字层用绝对定位叠加在图片上层即可：

• 数组结构调整为{ img: 图片资源, title: 图片标题, desc: 图片叠加描述 }格式，后续替换图片、修改文字只需要改数组配置
• 文字层设置高于图片的z-index，可按需加文字阴影、半透明蒙层保证文字在不同图片上都清晰可读

优化后完整代码 #

Slider.js 组件代码 #

import React, { useState } from "react";
import Img1 from "../data/SliderImages/1.avif";
import Img2 from "../data/SliderImages/2.avif";
import Img3 from "../data/SliderImages/3.avif";
import Img4 from "../data/SliderImages/4.jpg";
import Img5 from "../data/SliderImages/5.jpg";
import Img6 from "../data/SliderImages/6.jpg";
import Img7 from "../data/SliderImages/7.avif";
// 引入组件样式
import "./Slider.css";

function Slider() {
  // 重构为对象数组，同时存图片和对应文字
  const SliderArray = [
    { img: Img1, title: "第一张图标题", desc: "这是第一张图的叠加说明文字" },
    { img: Img2, title: "第二张图标题", desc: "这是第二张图的叠加说明文字" },
    { img: Img3, title: "第三张图标题", desc: "这是第三张图的叠加说明文字" },
    { img: Img4, title: "第四张图标题", desc: "这是第四张图的叠加说明文字" },
    { img: Img5, title: "第五张图标题", desc: "这是第五张图的叠加说明文字" },
    { img: Img6, title: "第六张图标题", desc: "这是第六张图的叠加说明文字" },
    { img: Img7, title: "第七张图标题", desc: "这是第七张图的叠加说明文字" },
  ];
  const [count, setCounter] = useState(0);
  const imgTotal = SliderArray.length;

  const addIndex = () => {
    // 到最后一张时切回第一张，循环播放
    setCounter(count === imgTotal - 1 ? 0 : count + 1);
  };

  const subIndex = () => {
    // 到第一张时切到最后一张，循环播放
    setCounter(count === 0 ? imgTotal - 1 : count - 1);
  };

  return (
    <div className="slider-page">
      <h1>Slider</h1>
      <div className="slider-container">
        {/* 切换按钮 */}
        <button className="slider-btn prev" onClick={subIndex}>-</button>
        <button className="slider-btn next" onClick={addIndex}>+</button>

        {/* 图片+文字层渲染 */}
        {SliderArray.map((item, index) => (
          <div
            className={`slider-item ${index === count ? "active" : ""}`}
            key={index}
          >
            <img src={item.img} alt={item.title} className="slider-img" />
            {/* 叠加文字层 */}
            <div className="slider-text">
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Slider;

Slider.css 样式代码（含过渡动画） #

.slider-page {
  padding: 20px;
}
.slider-container {
  position: relative;
  width: 800px;
  height: 450px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
}
.slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 透明度过渡动画，时长0.6秒 */
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
}
.slider-item.active {
  opacity: 1;
  z-index: 2;
}
.slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 30px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  z-index: 3;
}
.slider-text h3 {
  margin: 0 0 10px 0;
  font-size: 28px;
}
.slider-text p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}
.slider-btn.prev {
  left: 20px;
}
.slider-btn.next {
  right: 20px;
}
.slider-btn:hover {
  background: #fff;
}

可调整的配置项：修改CSS中transition属性的值可以改动画时长、动画效果；修改.slider-text的定位可以把文字放到图片任意位置；如果需要滑动切换效果，只需要给.slider-item加transform过渡，切换时修改偏移量即可。

内容的提问来源于stack exchange，提问作者Android Army