# 滑动图片

**Repository Path**: muyunyangc/bb

## Basic Information

- **Project Name**: 滑动图片
- **Description**: 图片滑动html文件
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-10
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 滑动图片

## 介绍
这是一个图片滑动展示项目，旨在通过直观的滑动交互实现图片和标题的浏览体验。项目采用 HTML、CSS 和 JavaScript 构建，支持动态加载图片和预加载优化，适用于桌面和移动端。

## 软件架构
项目由三个核心文件组成：
- `index.html`：页面结构，包含滑动容器和缩略图轮播组件。
- `styles.css`：样式文件，定义了滑动效果、响应式布局和交互动画。
- `script.js`：逻辑控制，包括滑动行为、图片预加载、缩略图同步等功能。

主要功能模块：
- 图片动态加载与缓存
- 滑动事件监听与动画渲染
- 缩略图生成与高亮同步
- 移动端适配与响应式支持

## 安装教程
1. 克隆仓库到本地：
   ```bash
   git clone https://gitee.com/muyunyangc/bb.git
   ```
2. 进入项目目录：
   ```bash
   cd bb
   ```
3. 使用浏览器打开 `index.html` 文件即可运行项目。

## 使用说明
1. 页面加载后会自动初始化滑动组件并展示第一张图片。
2. 滑动鼠标滚轮或在移动端滑动屏幕，可以切换图片。
3. 缩略图区域会同步高亮当前展示的图片。
4. 图片会根据当前视口位置进行预加载，提升浏览体验。

## 配置与扩展
- **图片与标题设置**：在 `script.js` 中修改 `imageUrls` 和 `slideTitles` 数组，可以自定义图片地址和标题。
- **响应式适配**：通过 `isMobile` 变量检测设备类型，自动调整交互方式。
- **性能优化**：使用 `preloadAndCacheImages` 和 `loadNearbyImages` 方法实现图片预加载，减少卡顿。

## 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

## 许可证
本项目遵循 MIT 许可协议。详情请查看项目根目录下的 LICENSE 文件。