qc-xjqxz-retro/src/pages/Home/SectBox.tsx

import { Carousel } from "antd"
import React, { useRef, useState } from "react"


const CAROUSELDATA = ['wlm', 'zjsz', 'wysj', 'xxp', 'lss', 'yc', 'qh', 'tm'].map((item, index) => ({
    image: `https://cp.71game.cn/assets/xjqxz/image/sect/sect${index + 1}.png`,
    icon: `https://cp.71game.cn/assets/xjqxz/image/sect/tab${index + 1}.png`,
    icon_selectd: `https://cp.71game.cn/assets/xjqxz/image/sect/tab${index + 1}_active.png`,
    value: item
}))
/**
 * 门派介绍
 * @returns 
 */
const SectBox: React.FC = () => {

    /****************************/
    const ref = useRef<any>()
    const [active, setActive] = useState<number>(0)
    /****************************/

    const scrollToTab = (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
        const tab = e.currentTarget;
        const tabContainer = tab.parentElement?.parentElement; // 获取 tab 的父容器  
        if (tabContainer) {
            const tabPosition = tab.getBoundingClientRect().left + tabContainer.scrollLeft; // 计算 tab 的绝对位置  
            const containerWidth = tabContainer.clientWidth; // 获取容器的宽度  
            const scrollPosition = tabPosition - containerWidth / 2 + tab.offsetWidth / 2; // 计算滚动位置  
            tabContainer?.scrollTo({
                left: scrollPosition,
                behavior: 'smooth' // 平滑滚动  
            });
        }
    };

    return <section className="sect-box">
        {/* <h1 className="news-title"><span>门派介绍</span></h1> */}
        <div className="hero-inner sect-inner">
            <Carousel dots={false} ref={ref} beforeChange={(_: number, nextSlide: number) => { setActive(nextSlide) }}>
                {CAROUSELDATA.map(item => <div key={item.value}>
                    <img src={item.image} alt="" className="sect-img" />
                </div>)}
            </Carousel>
            <div className="sect-nav">
                <div className="left" />
                <div className="nav">
                    <ul>
                        {CAROUSELDATA?.map((item, index) => <li
                            className={active === index ? 'active' : ''}
                            key={item.value}
                            onClick={(e) => {
                                scrollToTab(e)
                            }}
                        >
                            <img
                                src={active === index ? item.icon_selectd : item.icon}
                                alt=""
                                onClick={() => {
                                    ref?.current?.goTo(index)
                                }}
                            />
                        </li>)}
                    </ul>
                </div>
                <div className="right" />
            </div>
        </div>
    </section>
}

export default React.memo(SectBox)