85 lines
2.2 KiB
JavaScript
Executable File
85 lines
2.2 KiB
JavaScript
Executable File
import React, { useEffect, useState } from 'react';
|
||
import './Home.css';
|
||
|
||
const slidesData = [
|
||
{
|
||
id: 1,
|
||
title: '行业资讯：新机型发布',
|
||
description: '最新机型亮相航空展，性能全面升级',
|
||
image: 'http://localhost:3001/uploads/home_1.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '解决方案：资料管理优化',
|
||
description: '一体化资料管理平台上线，提效30%',
|
||
image: 'http://localhost:3001/uploads/home_2.jpg'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '产品更新：PDF在线预览',
|
||
description: '新增在线预览与多端适配功能',
|
||
image: 'http://localhost:3001/uploads/home_3.jpg'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '客户案例：数字化转型',
|
||
description: '多行业落地实践，推动数据驱动决策',
|
||
image: 'http://localhost:3001/uploads/home_4.jpg'
|
||
}
|
||
];
|
||
|
||
const Home = () => {
|
||
const [active, setActive] = useState(0);
|
||
|
||
useEffect(() => {
|
||
const timer = setInterval(() => {
|
||
setActive((prev) => (prev + 1) % slidesData.length);
|
||
}, 4000);
|
||
return () => clearInterval(timer);
|
||
}, []);
|
||
|
||
const prevSlide = () => {
|
||
setActive((prev) => (prev - 1 + slidesData.length) % slidesData.length);
|
||
};
|
||
|
||
const nextSlide = () => {
|
||
setActive((prev) => (prev + 1) % slidesData.length);
|
||
};
|
||
|
||
return (
|
||
<div className="home-page">
|
||
|
||
|
||
<div className="carousel-full">
|
||
<button className="arrow left" onClick={prevSlide}>‹</button>
|
||
|
||
<div className="slides">
|
||
{slidesData.map((s, idx) => (
|
||
<div key={s.id} className={`slide ${idx === active ? 'active' : ''}`}>
|
||
<img className="slide-img" src={s.image} alt={s.title} loading="lazy" />
|
||
<div className="caption">
|
||
<h3>{s.title}</h3>
|
||
<p>{s.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<button className="arrow right" onClick={nextSlide}>›</button>
|
||
|
||
<div className="indicators">
|
||
{slidesData.map((_, idx) => (
|
||
<span
|
||
key={idx}
|
||
className={`dot ${idx === active ? 'active' : ''}`}
|
||
onClick={() => setActive(idx)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Home;
|