如何暂停 React 轮播组件内图像元素的 setInterval?

Question

我正在 react 中开发一个图像轮播组件，它接受来自文件上传实用程序的图像。它具有导航控件，左箭头，右箭头和旋转木马中央底部的光滑点。此外，当您单击轮播中的图像时，它应该在模态中打开。这些要求工作正常。

我还有一个要求，即在一定间隔后自动逐个显示轮播图像。我为此使用了setInterval((，在useEffect((钩子中，轮播中的图像正在发生变化。但问题是：当我点击轮播中的图像时，它会以模态打开，并且也会发生变化，就像轮播组件中的图像一样。

所以，我在想，当图像被单击并显示在模态中时，是否有任何方法可以暂停 setInterval((？ 并在模态关闭时再次恢复 setInterval((？

第二个问题：如何像滑入或滑出一样为轮播的幻灯片添加动画？

图像组件

import React, { useState, Fragment } from "react";
import Overlay from "../Overlay";
import "./Image.scss";
const Image = ({ imageSrc }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const handleShowDialog = () => {
setIsModalOpen(!isModalOpen);
};
return (
<Fragment>
<img
className="original-image"
src={imageSrc}
onClick={handleShowDialog}
alt="carousel"
/>
{isModalOpen && (
<Overlay closeOverlay={handleShowDialog}>
<img className="modal-image" src={imageSrc} alt="carousel" />
</Overlay>
)}
</Fragment>
);
};
export default Image;

图片轮播组件

import "./Carousel.scss";
import Image from "../Image";
import CarouselControls from "./CarouselControls";
const ImageCarousel = ({ imageUrls }) => {
const [currentPosition, setCurrentPosition] = useState(0);
const [activeArrow, setActiveArrow] = useState("");
useEffect(() => {
setCurrentPosition(0);
const interval = setInterval(changeSlide, 2000);
return () => clearInterval(interval);
}, [imageUrls]);
const changeSlide = () => {
const lastIndex = imageUrls.length - 1;
setCurrentPosition(currentPosition => {
return currentPosition === lastIndex ? 0 : currentPosition + 1;
});
};
const goToPreviousSlide = () => {
setActiveArrow("left");
const newPosition =
currentPosition === 0 ? imageUrls.length - 1 : currentPosition - 1;
setCurrentPosition(newPosition);
};
const goToNextSlide = () => {
setActiveArrow("right");
const newPosition =
currentPosition === imageUrls.length - 1 ? 0 : currentPosition + 1;
setCurrentPosition(newPosition);
};
const goToParticularSlide = position => {
setCurrentPosition(position);
};
return (
<div className="image-carousel">
<header className="carousel-header"> Image Carousel Component</header>
{imageUrls && imageUrls.length > 0 && (
<div className="carousel-container">
<Image imageSrc={imageUrls[currentPosition]} />
<CarouselControls
imageUrls={imageUrls}
activeArrow={activeArrow}
currentPosition={currentPosition}
goToNextSlide={goToNextSlide}
goToParticularSlide={goToParticularSlide}
goToPreviousSlide={goToPreviousSlide}
/>
</div>
)}
</div>
);
};
export default ImageCarousel;

我对整个项目的 codesandbox.io 链接：https://codesandbox.io/s/react-image-carousel-copy-sju4v

Answer 1

您可以将

1. setInterval存储在变量中，并使用它来停止循环，如下所示：

let si = setInterval(changeSlide, 2000);
function stopInterval() {
cancelInterval(si);
}

有多种
2. 方法可以"滑动"元素，下面是一个例子：

#container {
background-color: black;
width: 100%;
height: 400px;
overflow: hidden;
}
#your_image {
background-color: red;
width: 100%;
height: 100%;
/* note: `infinite` just for demo. */
animation: slide 4s ease-in-out infinite;
}
@keyFrames slide {
from {
transform: translateX(-150%);
}
25% {
transform: translateX(0);
}
75% {
transform: translateX(0);
}
to {
transform: translateX(150%);
}
}

<div id="container">
<div id="your_image">
image here
</div>
</div>