使用React+ts实现无缝滚动的走马灯详细过程

import { ReactElement, useEffect } from "react";
import * as React from "react";
import "./index.less";
import { ItemProps } from "./demo";
interface Props {
  Item: (item: ItemProps) => ReactElement;
  showNum: number;
  speed: number;
  containerWidth: number;
  data: Array<any>;
  hoverStop?: boolean;
  direction?: "left" | "right";
}
const fillArray = (arr: any[], length: number): any[] => {
  const result: any[] = [];
  while (result.length < length) {
    result.push(...arr);
  }
  return result.concat(result);
};
function AutoplayCarousel({
  Item,
  showNum,
  speed,
  containerWidth,
  data,
  hoverStop = false,
  direction = "left"
}: Props) {
  const showData = fillArray(data, showNum);
  const length = showData.length;
  const itemWidth = containerWidth / showNum;
  useEffect(() => {
    // 创建一个新的样式表对象
    const style = document.createElement("style");
    // 定义样式表的内容
    let start = "0";
    let end = `-${(itemWidth * length) / 2}`;
    if (direction === "right") {
      start = end;
      end = "0";
    }
    style.innerText = `
      @keyframes templates-partner-moving {
        0% {
           transform: translateX(${start}px);
        }
        100% {
          transform: translateX(${end}px);
        }
      }
    `;
    if (hoverStop) {
      style.innerText += `.list:hover {
      /*鼠标经过后，动画暂停*/
      animation-play-state: paused !important;
    }`;
    }
    // 将样式表插入到文档头部
    document.head.appendChild(style);
    // 组件卸载时清除样式表
    return () => document.head.removeChild(style) as any;
  }, []);
  return (
    <div style={{ width: `${containerWidth}px` }} className="wrap">
      <div
        className="list"
        style={{
          width: `${itemWidth * length}px`,
          animation: `templates-partner-moving ${
            (length / showNum / 2) * speed
          }s infinite linear`
        }}
      >
        {showData.map((item) => (
          <div style={{ width: `${itemWidth}px` }}>
            <Item {...item} />
          </div>
        ))}
      </div>
    </div>
  );
}
export default AutoplayCarousel;

import React from "react";
import AutoplayCarousel from "./index";
const data = new Array(5).fill(0).map((item, index) => {
  return { num: index };
});
console.log("data", data);
export interface ItemProps {
  num: number;
}
const itemStyle = {
  border: "1px solid #ccc",
  background: "#fff",
  height: "50px",
  color: "red",
  marginRight: "15px"
};
function Demo() {
  const Item = (item: ItemProps) => {
    return <div style={itemStyle}>{item.num}</div>;
  };
  return (
    <AutoplayCarousel
      Item={Item}
      containerWidth={500}
      showNum={5}
      speed={8}
      data={data}
    />
  );
}
export default Demo;

* {
	margin: 0;
	padding: 0;
}
.wrap {
	overflow: hidden;
	.list {
		position: relative;
		top: 0px;
		left: 0px;
		height: 100%;
		display: flex;
	}
}