Compare commits
2 Commits
1cf7e70d4e
...
4e377d4e8b
| Author | SHA1 | Date |
|---|---|---|
 qiuchenfan
|
4e377d4e8b | |
|
qiuchenfan
|
dcff6b29e5 |
|
|
@ -1,13 +1,22 @@
|
|||
// 引入 React 核心库，用于构建组件
|
||||
import * as React from "react";
|
||||
|
||||
// 引入 Embla Carousel 的自动播放插件，实现轮播图自动切换
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
|
||||
// 引入自定义 UI 组件：Card 和 CardContent（通常用于内容容器封装）
|
||||
import { Card, CardContent } from "@/ui/card";
|
||||
|
||||
// 引入自定义轮播组件及其核心子组件
|
||||
// 注意：这里没有使用 CarouselNext/Previous，说明该轮播为纯自动播放、无手动导航按钮
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
} from "@/ui/carousel";
|
||||
|
||||
// 定义轮播图中要展示的图片资源路径数组
|
||||
// 包含轮播主图（carousel-*.jpg）以及额外的静态资源（如 book1.png、header.png 等）
|
||||
const imageUrls = [
|
||||
"/images/carousel-1.jpg",
|
||||
"/images/carousel-2.jpg",
|
||||
|
|
@ -15,49 +24,56 @@ const imageUrls = [
|
|||
"/images/carousel-4.jpg",
|
||||
"/images/carousel-5.jpg",
|
||||
"/images/carousel-6.jpg",
|
||||
"/images/book1.png",
|
||||
"/images/header.png",
|
||||
"/images/jcdt.png",
|
||||
"/images/book1.png", // 可能是书籍封面
|
||||
"/images/header.png", // 可能是顶部 Banner 图
|
||||
"/images/jcdt.png", // 可能是“基层动态”等模块图标
|
||||
];
|
||||
|
||||
// 导出名为 AutoCarouselDemo 的函数式组件
|
||||
export function AutoCarouselDemo() {
|
||||
return (
|
||||
// 外层容器：相对定位，水平居中，上下留有足够间距（mt-30 ≈ 120px, mb-20 ≈ 80px）
|
||||
<div className="relative w-full mx-auto mt-30 mb-20">
|
||||
|
||||
|
||||
{/* 轮播主组件 */}
|
||||
<Carousel
|
||||
opts={{
|
||||
loop: true,
|
||||
align: "start",
|
||||
loop: true, // 启用无限循环：最后一张后自动回到第一张
|
||||
align: "start", // 对齐方式设为“起始对齐”，确保首项紧贴左侧（适用于非全屏单图场景）
|
||||
}}
|
||||
plugins={[
|
||||
// 配置自动播放插件：
|
||||
Autoplay({
|
||||
delay: 3000,
|
||||
stopOnInteraction: false,
|
||||
delay: 3000, // 每 3 秒自动切换一次
|
||||
stopOnInteraction: false, // 用户点击或拖拽后不停止自动播放（持续轮播）
|
||||
}),
|
||||
]}
|
||||
className="w-full"
|
||||
className="w-full" // 轮播容器占满父级宽度
|
||||
>
|
||||
{/* 轮播内容区域：添加 gap-4 实现卡片间 1rem（16px）间距 */}
|
||||
<CarouselContent className="flex gap-4">
|
||||
{/* 遍历所有图片 URL，为每张图生成一个轮播项 */}
|
||||
{imageUrls.map((src, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
// 响应式宽度控制：
|
||||
// - 默认（小屏）：每个项占 1/4 宽度（basis-1/4）
|
||||
// - 中屏（md）：占 1/3
|
||||
// - 大屏（lg）：回到 1/4，适合展示 4 列
|
||||
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
|
||||
>
|
||||
<div
|
||||
className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
|
||||
style={{
|
||||
transform: 'scale(1)',
|
||||
transition: 'all 0.5s ease',
|
||||
}}
|
||||
>
|
||||
<div className="overflow-hidden border-none h-120">
|
||||
<CardContent className="relative w-full h-full">
|
||||
{/* 卡片外层：添加内边距、悬停缩放动效、鼠标指针样式 */}
|
||||
<div className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer">
|
||||
{/* 图片容器：固定高度 h-120（即 30rem = 480px），隐藏溢出内容 */}
|
||||
<div className="overflow-hidden border-none h-120">
|
||||
{/* 使用 CardContent 包裹图片，确保与 UI 系统一致 */}
|
||||
<CardContent className="relative w-full h-full p-0"> {/* p-0 移除默认内边距 */}
|
||||
{/* 实际图片元素 */}
|
||||
<img
|
||||
src={src}
|
||||
alt={`Slide ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
alt={`Slide ${index + 1}`} // 无障碍访问：描述当前幻灯片
|
||||
className="w-full h-full object-cover" // 宽高填满容器，保持比例裁剪
|
||||
loading="lazy" // 懒加载：提升页面初始加载性能
|
||||
/>
|
||||
</CardContent>
|
||||
</div>
|
||||
|
|
@ -66,6 +82,8 @@ export function AutoCarouselDemo() {
|
|||
))}
|
||||
</CarouselContent>
|
||||
|
||||
{/* 注：此处未渲染 CarouselPrevious / CarouselNext，说明不提供手动左右箭头 */}
|
||||
{/* 如需添加，可在此处插入：<CarouselPrevious /> <CarouselNext /> */}
|
||||
|
||||
</Carousel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,31 +41,19 @@ export function CarouselDemo({
|
|||
paginationPosition = 'right', // 默认右下角
|
||||
paginationStyle = 'dot', // 默认圆形指示器
|
||||
}: CarouselDemoProps) {
|
||||
// 存储 Embla 轮播实例的引用，用于控制滚动等操作
|
||||
// 存储 Embla 轮播实例的引用 当前激活的幻灯片索引 总共的幻灯片数量 图片总数
|
||||
const [api, setApi] = React.useState<CarouselApi>();
|
||||
|
||||
// 当前激活的幻灯片索引（从 0 开始）
|
||||
const [current, setCurrent] = React.useState(0);
|
||||
|
||||
// 总共的幻灯片数量（由 Embla API 动态获取）
|
||||
const [count, setCount] = React.useState(0);
|
||||
|
||||
// 图片总数（用于渲染轮播项）
|
||||
const totalSlides = imageUrls.length;
|
||||
|
||||
// 副作用：监听 api 变化，初始化轮播状态并绑定 select 事件
|
||||
// 监听 api ，初始化轮播状态并绑定 select 事件 获取幻灯片总数 设置当前选中的 snap 索引 用户手动滑动或自动播放时触发 更新当前激活项
|
||||
React.useEffect(() => {
|
||||
if (!api) return; // 如果 api 尚未就绪，直接返回
|
||||
|
||||
// 获取所有 snap 点的数量（即幻灯片总数）
|
||||
if (!api) return;
|
||||
setCount(api.scrollSnapList().length);
|
||||
|
||||
// 设置当前选中的 snap 索引
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
|
||||
// 监听轮播切换事件（用户手动滑动或自动播放时触发）
|
||||
api.on("select", () => {
|
||||
setCurrent(api.selectedScrollSnap()); // 更新当前激活项
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
});
|
||||
}, [api]); // 仅当 api 发生变化时重新执行
|
||||
|
||||
|
|
@ -77,32 +65,33 @@ export function CarouselDemo({
|
|||
{/* 轮播主容器 */}
|
||||
<Carousel
|
||||
opts={{
|
||||
loop: true, // 启用循环播放（最后一张后回到第一张）
|
||||
loop: true,
|
||||
}}
|
||||
plugins={[
|
||||
// 配置自动播放插件：每 3 秒切换一次，且用户交互时不暂停
|
||||
Autoplay({
|
||||
delay: 3000,
|
||||
stopOnInteraction: false,
|
||||
}),
|
||||
]}
|
||||
setApi={setApi} // 将 Embla 实例保存到 state 中
|
||||
className="w-full" // 占满容器
|
||||
setApi={setApi} // 保存
|
||||
className="w-full"
|
||||
>
|
||||
{/* 轮播内容区域 */}
|
||||
<CarouselContent className=" w-full -ml-0">
|
||||
{/*
|
||||
移除默认内边距
|
||||
*/}
|
||||
<CarouselContent className=" w-full -ml-0 h-full">
|
||||
{/* 遍历图片数组，为每张图创建一个轮播项 */}
|
||||
{imageUrls.map((src, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="w-full pl-0" // 移除默认内边距
|
||||
className="w-full pl-0"
|
||||
>
|
||||
{/* 内部包裹层：无内边距，占满 */}
|
||||
{/* 内部包裹层：无内边距，占满
|
||||
移除默认间距
|
||||
自动填充容器，保持比例裁剪*/}
|
||||
<div className="p-0 w-full">
|
||||
{/* 使用 CardContent 包裹图片，移除默认间距 */}
|
||||
<CardContent className=" p-0 w-full m-0">
|
||||
{/* 图片元素：自动填充容器，保持比例裁剪 */}
|
||||
<div className="relative w-full aspect-video"> {/* 可选：设置固定宽高比 */}
|
||||
<div className="relative w-full aspect-video ">
|
||||
<img
|
||||
src={src}
|
||||
alt={`Slide ${index + 1}`} // 无障碍访问描述
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export function TopNav({
|
|||
// 将组件宽度调整为1514px，并保持居中
|
||||
<div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#176cad]">
|
||||
{/* 搜索框与导航菜单组合 */}
|
||||
<div className="flex items-center justify-start gap-35 ml-45 ">
|
||||
<div className="flex items-center justify-start gap-30 ml-45 ">
|
||||
{/* 导航菜单 */}
|
||||
<ul className="flex space-x-20 relative mr-10">
|
||||
{menuItems.map((item) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue