巽智科技移动端官网模板 | jQuery+Swiper 企业 WAP 模板，全屏翻页动画开箱即用

基于 jQuery + Swiper 打造的科技企业移动端（WAP）官网模板。开箱即用，替换品牌素材即可上线。

移动官网是企业在微信、手机浏览器里的第一张名片。多数科技外包与产品公司的做法是：PC 官网之外的移动端要么直接省略，要么临时拼一个页面，业务介绍与服务流程讲不清楚，转化询价全靠运气。

这套模板把科技企业移动官网的两类高频形态一次做齐：一套信息完整的标准首页（业务、流程、方案、招聘、联系方式一应俱全），加一套全屏翻页引导页（品牌主视觉 + 3D 视差翻页动画）。替换图片与文案，即可获得一个专业、有动效质感的移动端门面。

模板亮点

1. 两种页面形态，覆盖移动官网主流玩法

• 首页：顶部品牌栏 + 自动轮播 Banner + 公司简介 + 核心业务 + 服务流程 + 解决方案 + 团队招聘 + 完整页脚，企业官网信息架构一步到位
• 滑块页：全屏垂直翻页 H5 引导页，适合活动推广、微信转发场景，与首页互为补充

2. 专业级全屏翻页动画系统

• Swiper 纵向翻页：触屏滑动 + 鼠标滚轮均可翻页，loop 循环播放
• swipe.animate 动画编排：每一屏元素按 delay 节奏依次入场，内置 zoomIn / bounceInLeft / bounceInRight / bounceInUp 等 Animate.css 效果，改属性即可换动效
• 3D 视差翻页：翻页时页面带 translate3d + scaleY + opacity 渐变，前后页纵深错开，观感立体
• 引导细节：向下箭头动画提示 + 分页圆点指示，移动端体验细节完整

3. 科技企业场景组件齐全

• 四大业务卡：iOS 应用 / Android 应用 / HTML5 应用 / 微信公众平台，图文卡片布局
• 四步服务流程：项目策划 → 交互视觉 → 程序开发 → 项目验收，条目化展示服务能力
• 解决方案墙：六宫格案例图，直接替换为自有案例
• 招聘区块：岗位说明 + 邮箱联系 + 加入按钮
• 底部转化栏：固定「拨打电话 / 在线咨询」双按钮，页脚含售前电话、QQ、邮箱与双办公地址

4. 触屏轮播开箱即用

首页 Banner 基于 TouchSlide 触屏焦点图，自动分页、3 秒自动播放、支持左右滑动，手机上无需任何调试。

5. 移动端适配到位

viewport 禁缩放设置、流式百分比布局、normalize.css 样式归一，Android / iOS / 微信内置浏览器均可直接运行；纯静态无后端依赖，任意虚拟主机即可部署。

技术栈

技术	版本	用途
jQuery	1.7.1	DOM 操作 / 事件
Swiper	3.0.6	全屏纵向翻页 / 视差
swiper.animate	—	分屏入场动画编排
Animate.css	2015	CSS3 入场动画库
TouchSlide	1.1	首页触屏焦点图轮播
normalize.css	—	样式归一

项目结构

xunsmart-mobile/
├── 首页.html          # 企业移动官网首页（业务/流程/方案/招聘/联系方式）
├── 滑块.html          # 全屏翻页 H5 引导页（3 屏 + 视差动画）
├── css/
│   ├── style.css      # 首页主样式（主题色在此修改）
│   ├── style2.css     # 滑块页样式
│   ├── swiper.min.css # Swiper 轮播样式
│   ├── animate.min.css# Animate.css 动画库
│   └── normalize.css  # 样式归一
├── js/
│   ├── swiper.min.js          # Swiper 3.0.6
│   ├── swiper.animate.min.js  # 分屏动画控制器
│   ├── TouchSlide.1.1.js      # 触屏焦点图
│   └── jquery.min.js          # jQuery 1.7.1
└── img/               # 品牌素材（logo、banner、业务图、团队图等）

快速开始

纯静态模板，无需构建：

# 方式一：浏览器直接打开
双击「首页.html」或「滑块.html」即可预览

# 方式二：本地静态服务器（推荐，更接近真实手机访问）
cd xunsmart-mobile
python3 -m http.server 8000
# 浏览器访问 http://localhost:8000/首页.html

也可使用 VS Code 的 Live Server 插件一键预览。建议用浏览器开发者工具切换到手机视口（iPhone / Android 尺寸）查看效果。

二次开发指南

需求	操作
更换品牌	同名替换 img/ 下的 logo.png、banner.png、ft_logo.png 等
修改文案 / 链接	各 HTML 内中文文案与 href 直接修改
修改主题色	修改 css/style.css 中的 #ec6941 / #ed7854（橙色系）
调整翻页动画	修改 滑块.html 元素上的 swiper-animate-effect 属性
增删业务卡片	复制 / 删除 ui_piclistb 内的 <dl> 节点即可
增删翻页屏数	复制 / 删除 swiper-wrapper 内的 <section> 节点

适用场景

软件开发 / 外包公司、物联网与高新技术企业移动官网，产品与解决方案宣传页，微信传播用全屏翻页 H5，也可作为通用科技类移动端（WAP）企业站模板二次改版。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	1~2 周起	半天替换素材即可上线
页面还原度	反复返工	成品级页面直接可用
翻页动画	需自研调优	3D 视差 + 编排动效内置
移动端适配	逐机型调试	触屏 / 禁缩放已配置
维护成本	自行承担	纯静态无依赖，改图即迭代

在线预览

模板为纯静态页面，将整个目录上传至任意静态托管（宝塔 / Nginx / 阿里云 OSS / GitHub Pages / Vercel）即可在线访问。

http://case.fedshare.cn/xunsmart-mobile/%E9%A6%96%E9%A1%B5.html