Feature Switch 图片切换展示组件

一个基于 HTML + CSS + JavaScript 实现的响应式图片切换展示组件。

该组件适用于企业官网、产品介绍页、AI 工具展示页、SaaS 服务页面等场景。

通过点击左侧功能卡片，实现右侧大图动态切换，同时保持布局高度统一，提供简洁、美观、易扩展的展示效果。

项目特点

• 纯 HTML + CSS + JavaScript
• 无需任何框架依赖
• 图片与代码分离
• 支持多个组件同时存在
• 响应式布局
• 图片点击切换动画
• 信息卡片 Active 状态
• 固定图片尺寸保证布局稳定
• 类名简单易懂，方便复制修改

技术亮点

固定图片尺寸设计

图片区域采用：

780px × 460px

保证标题、描述变化时整体布局保持稳定。

Flex 高度控制

信息区域：

.switch-info{
    height:460px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

实现：

• 卡片自动均分高度
• 卡片之间保持间距
• 与图片区域高度一致

点击切换图片

点击不同功能卡片：

• 切换 Active 状态
• 更新对应图片
• 图片平滑过渡

多组件支持

页面中可以同时使用多个 .switch 组件，互不影响。

项目结构

feature-switch

├── index.html
├── css
│   └── style.css
├── js
│   └── main.js
└── images
    └── 图片资源

使用场景

AI 工具展示

例如：

• OCR文字识别
• 图片转Word
• 图片转Excel
• AI功能介绍

企业产品展示

例如：

• 产品系列
• 功能特点
• 应用场景
• 工程案例

SaaS 服务页面

例如：

• 功能介绍
• 服务优势
• 系统模块展示

WordPress 企业网站

可直接应用于：

• 自定义HTML模块
• Elementor模块
• 企业官网首页

修改方法

替换图片

修改：

images/

目录中的图片即可。

支持：

• JPG
• PNG
• WebP
• SVG

修改文字

直接修改：

<h3>标题</h3>
<p>描述内容</p>

增加功能卡片

复制 .item：

<div class="item" data-img="images/new.jpg">
    <h3>新功能</h3>
    <p>功能描述</p>
</div>

即可扩展。

扩展方向

• 图片左右滑入动画
• 更丰富切换效果
• Active状态增强
• 自动轮播
• 悬停暂停
• 切换时间控制
• JSON数据驱动
• 动态生成组件
• 更多布局模式

设计理念

遵循：

简单结构
+
清晰命名
+
容易复制
+
方便扩展

适合作为个人前端组件库长期积累。

License

MIT License