React 中的轮播答案

【问题标题】：Carousel in ReactReact 中的轮播
【发布时间】：2022-10-19 23:13:43
【问题描述】：

我做了一个旋转木马，但我对动画很不满意。如果我单击右键，我希望它从右侧滑动，如果我单击左键，我希望它从左侧滑动。所以我所做的是创建一个状态const [classactive, setClassactive] = useState(false); 并说img 类是className={classactive == true ? "active-right" : "active-right-2"}。我这样做是为了让动画继续播放。 CSS 上的类完全相同。所以，我想用左键做同样的事情，但不是使用一个类，而是使用一个 ID，它确实有效，问题是右幻灯片动画停止了。我觉得我让它比实际情况更复杂。 img 是一个数组，其中包含每张图片的 src。

<div className="thumb">
          <img
            src={img[index]}
            width="700px"
            className={classactive == true ? "active-right" : "active-right-2"}
            id={idactive == true ? "active-left" : "active-left-2"}
            name="thumbs"
          ></img>
          <div className="label">
            <h1>{projectTitle[index]}</h1>
            <p>{projectDesc[index]}</p>
          </div>
        </div>

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

问题是 ID 选择器比类具有更高的特异性，因此一旦您的 img 元素具有活动 ID，与该 ID 相关的 css 规则将超过 css 类。

一种方法是将classactive 状态值更改为表示变量类名而不是布尔值的字符串，并让点击处理程序确定该名称。这样您就不需要任何 ID，只需一个有状态的类名。

遵循这种思路可能会变得非常混乱，但这并不是最复杂的解决方案。祝你好运?

【讨论】：

【解决方案2】：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [index, setIndex] = useState(0);

  const carousels = [
    "https://www.w3schools.com/css/img_5terre.jpg",
    "https://www.w3schools.com/css/img_forest.jpg",
    "https://www.w3schools.com/css/img_lights.jpg"
  ];

  const onNext = () => {
    console.log(carousels.length);

    if (index < carousels.length - 1) {
      let i = index + 1;
      setIndex(i);
    } else {
      setIndex(0);
    }
  };

  const onPrev = () => {
    if (index > 0 && index < carousels.length) {
      let i = index - 1;
      setIndex(i);
    } else {
      setIndex(carousels.length - 1);
    }
  };

  return (
    <div className="carousel">
      {carousels.map((item, i) =>
        i === index ? (
          <div className="carousel-item" key={i}>
            <img src={item} alt={item} />
          </div>
        ) : null
      )}

      <a className="prev" onClick={onPrev}>
        Prev
      </a>
      <a className="next" onClick={onNext}>
        Next
      </a>
    </div>
  );
}

.carousel {
  position: relative;
}

.carousel img {
  width: 100%;
}

.prev {
  position: absolute;
  left: 0;
  top: 15rem;
  z-index: 1;
  background-color: white;
  padding: 5px;
}

.next {
  position: absolute;
  right: 0;
  top: 15rem;
  z-index: 1;
  background-color: white;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：