当鼠标悬停在 div 上时，自动 slider 停止 -javascript

Question

我在反应应用程序上有一个自动 slider。 当我用鼠标在 div 上使用 hover 时，我希望幻灯片停止。

当鼠标悬停在 div 上时，我有一个结构会变成真假

这是我的代码模板： https://codesandbox.io/s/nice-johnson-15xbl2?file=/src/App.js

这是我的代码：

export default function App() {
  const [slideIndex, setSlideIndex] = useState(1);
  const [onHover, setOnHover] = useState(false);

  const dataSlider = [
    {
      name: "Enes"
    },
    {
      name: "Burak"
    }
  ];

  const nextSlide = () => {
    if (slideIndex !== dataSlider.length) {
      setSlideIndex(slideIndex + 1);
    } else if (slideIndex === dataSlider.length) {
      setSlideIndex(1);
    }
  };

  setTimeout(() => {
    if (onHover === false) {
      nextSlide();
    }
  }, 3000);

  return (
    <>
      <div
        className="container-slider"
        onMouseEnter={() => setOnHover(true)}
        onMouseLeave={() => setOnHover(false)}
      >
        {dataSlider.map((obj, index) => {
          return (
            <>
              <div
                key={obj.id}
                className={
                  slideIndex === index + 1 ? "slide active-anim" : "slide"
                }
              >
                {obj.name}
              </div>
            </>
          );
        })}
      </div>
      {Array.from({ length: dataSlider.length }).map((item, index) => (
        <div
          key={index}
          style={{ cursor: " pointer" }}
          onClick={() => setSlideIndex(index + 1)}
          // className={slideIndex === index + 1 ? 'dots active' : 'dots'}
        >
          Slide {index}
        </div>
      ))}
    </>
  );
}

和 css：

.container-slider {
  /* width: 1420px;
  margin: auto; */
  height: 620px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  border: 1px solid red;
}

.slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity ease-in-out 0.4s;
}

谢谢你的时间

Answer 1

您需要对setInterval创建的间隔有一个持久引用。 为此使用useRef挂钩。

使用useEffect挂钩检查isHovering state 中的更改。 在钩子中，检查isHovering是真还是假。 基于该 state 开始或停止间隔。

export default function App() {
  const [slideIndex, setSlideIndex] = useState(1);
  const [isHovering, setIsHovering] = useState(false);
  const interval = useRef(null);

  const dataSlider = [
    {
      name: "Enes"
    },
    {
      name: "Burak"
    }
  ];

  const nextSlide = () => {
    if (slideIndex !== dataSlider.length) {
      setSlideIndex(slideIndex + 1);
    } else {
      setSlideIndex(1);
    }
  };

  useEffect(() => {
    if (!isHovering) {
      interval.current.setInterval(() => {
        nextSlide();
      }, 3000);
    } else {
      clearInterval(interval.current);
      interval.current = null;
    }
  }, [isHovering]);

  return (
    <>
      <div
        className="container-slider"
        onMouseEnter={() => setIsHovering(true)}
        onMouseLeave={() => setIsHovering(false)}
      >
        {dataSlider.map((obj, index) => {
          return (
            <>
              <div
                key={obj.id}
                className={
                  slideIndex === index + 1 ? "slide active-anim" : "slide"
                }
              >
                {obj.name}
              </div>
            </>
          );
        })}
      </div>
      {Array.from({ length: dataSlider.length }).map((item, index) => (
        <div
          key={index}
          style={{ cursor: " pointer" }}
          onClick={() => setSlideIndex(index + 1)}
          // className={slideIndex === index + 1 ? 'dots active' : 'dots'}
        >
          Slide {index}
        </div>
      ))}
    </>
  );
}