佛像法器产品展示网站

纯前端响应式产品展示网站，手机优先设计。

---

文件结构

dxlsfq/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # 交互逻辑
├── README.md           # 说明文档
├── .github/
│   └── workflows/
│       └── pages.yml   # GitHub Actions 自动部署
├── audio/              # 音频文件
│   ├── bg.mp3          # 背景音乐
│   └── README.md       # 音频说明
└── images/             # 产品图片
    ├── wechat.jpg      # 微信二维码
    ├── foxiang/        # 佛像类
    ├── tongzhong/      # 铜钟类
    ├── xianglu/        # 香炉类
    ├── baoding/        # 宝鼎类
    ├── paibian/        # 牌匾类
    ├── muyu/           # 木鱼类
    └── nianzhu/        # 念珠类

---

功能特点

• ✅ 响应式设计（手机/平板/桌面）
• ✅ 产品分类筛选（7 个分类）
• ✅ 产品图片展示
• ✅ 图片放大查看（支持左右切换）
• ✅ 键盘快捷键支持（← → Esc）
• ✅ 平滑滚动导航
• ✅ 移动端汉堡菜单
• ✅ 背景音乐播放

---

网站配置

编辑 script.js 顶部的 siteConfig 对象：

const siteConfig = {
  name: "李释佛器", // 网站名称
  tagline: "匠心铸就 · 庄严殊胜", // 副标题
  description: "专业供奉佛像、法器、香道用品",
  footer: "李释佛器 · 广结善缘", // 页脚文字
  copyrightYear: 2026, // 版权年份
  contact: {
    phone: "13627947766", // 联系电话
    address: "地址", // 联系地址
  },
};

---

图片管理

分类配置

编辑 script.js 中的 categories 数组：

const categories = [
  { id: "foxiang", name: "佛像", imageCount: 15 },
  { id: "tongzhong", name: "铜钟", imageCount: 4 },
  // ... 更多分类
];

添加产品图片

1. 在对应分类文件夹添加图片（如 images/foxiang/）
2. 按顺序命名：1.png, 2.png, 3.png...
3. 修改 imageCount 为实际数量
4. 刷新网页即可

图片要求

• 格式: PNG 或 JPG
• 尺寸: 建议 600x400 像素（或相同比例）
• 大小: 建议 < 500KB
• 命名: 从 1 开始的连续数字

---

背景音乐

使用方法

1. 准备 MP3 格式音乐文件
2. 放入 audio/ 文件夹
3. 重命名为 bg.mp3
4. 刷新网页

控制方式

• 点击右下角 🎵 按钮：播放/暂停
• 页面加载后自动尝试播放
• 任何用户交互（点击/滚动）触发播放

---

配色方案

编辑 styles.css 中的 CSS 变量：

:root {
  --primary-gold: #d4af37; /* 主金色 */
  --primary-dark: #1a1a2e; /* 深色背景 */
  --primary-red: #8b2332; /* 红色点缀 */
  --text-light: #f5f5f5; /* 浅色文字 */
  --text-dark: #333; /* 深色文字 */
  --bg-light: #faf8f5; /* 浅色背景 */
  --bg-card: #ffffff; /* 卡片背景 */
}

---

使用技巧

键盘快捷键

• ← : 上一张图片
• → : 下一张图片
• Esc : 关闭大图模式

图片浏览

1. 点击任意产品图片 → 放大查看
2. 点击 ❮ 或 ❯ → 切换图片
3. 点击 × 或背景 → 关闭

---

常见问题

Q: 图片不显示？

A: 检查图片路径和文件名是否正确，确保从 1 开始连续命名。

Q: 音乐不播放？

A: 浏览器限制自动播放，点击页面任意位置或点击 🎵 按钮。

Q: 如何添加新分类？

A: 在 categories 数组添加新分类，创建对应文件夹，放入图片。

---

更新日志

• 2026-03-15: 初始版本
  • 响应式设计
  • 7 个产品分类
  • 图片放大功能
  • 背景音乐
  • 联系信息

---

创建时间: 2026-03-14
最后更新: 2026-03-15