JavaScript UI Effects Showcase

一个用于展示前端交互效果的静态页面项目，包含 3 个响应式 HTML / CSS / JavaScript 效果示例。

在线展示内容

项目包含一个总展示页和 3 个独立 Demo 页面。

1. Timeline Accordion

时间线手风琴效果。

• 左侧为年份菜单
• 点击某一年份后展开对应描述
• 其他年份自动收起
• 右侧图片根据当前选中项同步切换
• 手机端自动适配为单列布局

页面文件：

demos/timeline-accordion.html

截图：

![Timeline Accordion](assets/screenshots/timeline-accordion.png)

---

2. Destination Card Carousel

目的地卡片轮播效果。

• 使用 Swiper 轮播
• 桌面端一行显示 4 个卡片
• 手机端一行显示 2 个卡片
• 桌面端每次滚动 4 个
• 手机端每次滚动 2 个
• 默认自动播放
• 鼠标悬停时显示左右箭头
• 箭头 hover 时有背景状态变化
• 滚动到最后一组时箭头进入禁用状态
• 手机端显示底部分页圆点

页面文件：

demos/destination-card-carousel.html

截图：

![Destination Card Carousel](assets/screenshots/destination-carousel.png)

---

3. Nested Card Carousel

嵌套式卡片轮播效果。

• 外层为 Swiper 卡片轮播
• 每个卡片内部图片也是独立 Swiper 轮播
• 内层图片不自动播放
• 点击卡片图片上的左右箭头切换图片
• 支持爱心收藏按钮样式
• 桌面端显示外层左右切换按钮
• 手机端显示分页圆点

页面文件：

demos/nested-card-carousel.html

截图：

![Nested Card Carousel](assets/screenshots/nested-card-carousel.png)

项目结构

.
├── index.html
├── README.md
├── assets
│   ├── css
│   │   ├── base.css
│   │   ├── showcase.css
│   │   ├── timeline-accordion.css
│   │   ├── destination-carousel.css
│   │   └── nested-card-carousel.css
│   ├── js
│   │   ├── timeline-accordion.js
│   │   ├── destination-carousel.js
│   │   └── nested-card-carousel.js
│   ├── images
│   │   ├── timeline
│   │   ├── destinations
│   │   └── deals
│   └── screenshots
│       ├── timeline-accordion.png
│       ├── destination-carousel.png
│       └── nested-card-carousel.png
└── demos
    ├── timeline-accordion.html
    ├── destination-card-carousel.html
    └── nested-card-carousel.html

页面入口

打开根目录下的 index.html 即可查看总展示页。

index.html

也可以单独打开每个 Demo 页面：

demos/timeline-accordion.html
demos/destination-card-carousel.html
demos/nested-card-carousel.html

图片替换说明

图片已经按效果分类整理到 assets/images/ 目录中，后续只需要按照现有文件名替换图片即可。

时间线手风琴图片

assets/images/timeline/timeline-01.png
assets/images/timeline/timeline-02.png
assets/images/timeline/timeline-03.png
assets/images/timeline/timeline-04.png
assets/images/timeline/timeline-05.png
assets/images/timeline/timeline-06.png

目的地卡片轮播图片

assets/images/destinations/destination-01.png
assets/images/destinations/destination-02.png
assets/images/destinations/destination-03.png
assets/images/destinations/destination-04.png
assets/images/destinations/destination-05.png
assets/images/destinations/destination-06.png
assets/images/destinations/destination-07.png
assets/images/destinations/destination-08.png

嵌套卡片轮播图片

每个卡片内部有多张图片，命名方式如下：

assets/images/deals/deal-01-01.png
assets/images/deals/deal-01-02.png
assets/images/deals/deal-01-03.png

assets/images/deals/deal-02-01.png
assets/images/deals/deal-02-02.png
assets/images/deals/deal-02-03.png

命名规则：

deal-卡片编号-图片编号.png

例如：

deal-03-01.png
deal-03-02.png
deal-03-03.png

表示第 3 个卡片中的第 1、2、3 张图片。

样式文件说明

公共基础样式：

assets/css/base.css

首页展示页样式：

assets/css/showcase.css

三个效果的独立样式：

assets/css/timeline-accordion.css
assets/css/destination-carousel.css
assets/css/nested-card-carousel.css

JavaScript 文件说明

时间线手风琴交互：

assets/js/timeline-accordion.js

目的地 Swiper 轮播：

assets/js/destination-carousel.js

嵌套 Swiper 卡片轮播：

assets/js/nested-card-carousel.js

Swiper 依赖

轮播效果使用 Swiper CDN。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

如果需要离线部署，可以下载 Swiper 的 CSS 和 JS 文件，然后替换为本地路径。

GitHub Pages 部署

上传到 GitHub 仓库后，可以通过 GitHub Pages 部署静态页面。

操作路径：

Settings → Pages → Build and deployment → Source → Deploy from a branch

推荐设置：

Branch: main
Folder: /root

保存后，GitHub 会自动生成访问链接。

自定义修改

修改文字内容

直接编辑对应 Demo 页面中的 HTML 内容即可。

例如：

demos/timeline-accordion.html
demos/destination-card-carousel.html
demos/nested-card-carousel.html

修改颜色

主要颜色可以在对应 CSS 文件顶部的 :root 中调整。

例如：

:root {
  --navy: #071441;
  --text: #1a2140;
  --white: #ffffff;
}

修改轮播数量

Swiper 的显示数量和滚动数量可以在对应 JS 文件中修改。

桌面端一行 4 个、每次滚动 4 个：

slidesPerView: 4,
slidesPerGroup: 4

手机端一行 2 个、每次滚动 2 个：

slidesPerView: 2,
slidesPerGroup: 2

适用场景

这个项目适合用于：

• 官网交互效果展示
• GitHub Pages 静态页面展示
• 前端组件练习
• Elementor / WordPress 页面效果参考
• 酒店、旅游、产品展示类页面
• 公司时间线、发展历程页面

License

This project is for learning, demonstration, and website UI reference.