源码系统概览
文章正文
这是一套走简洁黑色路线的全屏滚动主页源码，整个页面被切成五屏轮播，每一屏只讲一个主题：个人简介、博客入口、影视、圈子、旅行。
视觉上靠背景大图撑场，交互上靠自动播放与底部点状导航切换，运行上不依赖任何后端服务，把文件夹传到任意静态空间就能跑起来。
下载后适合做个人主页、作品集入口、单页导航站，也能改造成产品落地页模板。
源码简介
源码定位是单页全屏滚动主页，整站没有数据库、没有后台管理页面，唯一的两个 HTML 入口是 index.html 与 404.html，其它内容全部靠 CSS 与 JS 在同一页面内切换。
主入口文件 index.html 用语义化的 section 与 ul 描述五个全屏滑块，每一个 li 都是一屏，依次是「任某某」简介、「观点与分享」博客、「影视与感官」影视、「志趣相投」圈子、「说走就走」旅行，底部导航用 Bootstrap 栅格铺出页脚信息和弹出式百度搜索框。
页面顶部用一段 IE 版本嗅探脚本引导低版本浏览器切换到极速模式或下载现代浏览器，避免老 IE 下整页布局塌掉。
适用场景
想要做个人主页、作品集首页、技术博客入口页的同学，可以直接套用，替换背景图与五屏文案就能上线。
想做单页导航站，把五个全屏滑块改成不同类目入口，导航标记同步改成对应分类就行。
把它当落地页模板来卖产品或服务，靠背景视频和自动轮播在第一屏抓住访客注意力。
做内部项目展示、培训资料封面、活动专题页这种一次性单页，使用成本也不高。
功能亮点
主轮播基于 cd-hero 全屏滑块组件，五屏自动播放，间隔 5 秒，可以点击右下角导航标记点随时切换。
支持桌面端背景视频播放，组件会自动识别 .cd-bg-video 容器并注入 video 元素，离开当前屏时自动暂停，进入含视频的屏时自动播放。
内置简繁切换脚本 gb2big5.js，通过右上角语言切换按钮一键把整页正文转换为繁体，繁体状态用 cookie 保存 7 天。
响应式适配从 PC 到手机，使用 Bootstrap 4 alpha 栅格，浏览器宽度变化时 cd-hero 高度同步重算，移动端自动隐藏背景视频避免流量浪费。
右上角搜索图标点击弹出基于百度搜索建议的搜索层，提交后跳到百度结果页，输入框走百度的 opensug.js 联想接口。
右下角返回顶部按钮在页面滚动超过 100 像素时淡入显示，点击平滑回到顶部，滚动监听走 jQuery。
附带一份独立 404.html，样式与首页统一，访客输错地址不会跳到系统默认丑页面。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML5、CSS3、jQuery 1.x、Bootstrap 4.0.0-alpha.6、Tether、gb2b | 依具体方案选型，需自行搭建与维护 |
| 部署方式 | 下载并解压源码后，整个文件夹直接上传到服务器任意目录即可，目录结构无需变动。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 主轮播基于 cd-hero 全屏滑块组件，五屏自动播放，间隔 5 秒，可以点击右下角导航标记点随时切换。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML5、CSS3、jQuery 1.x、Bootstrap 4.0.0-alpha.6、Tether、gb2big5 简繁转换、GeeYo 自定义交互脚本
后端：无后端，纯静态文件，不依赖任何服务端语言
数据库：无数据库，所有内容以静态文本写在 HTML 中
运行环境：任意支持静态文件托管的环境，包括 Nginx、Apache、IIS、宝塔面板、GitHub Pages、Vercel、Netlify、虚拟主机均可
其他依赖：可选启用桌面端背景视频，需在 Tpl/Individual/Style/index/video/ 路径下放置 video.mp4 和 video.webm 两份视频源
安装与部署提示
下载并解压源码后，整个文件夹直接上传到服务器任意目录即可，目录结构无需变动。
如果是部署到子目录（如 example.com/v2），保持相对路径引用即可，不要去改 index.html 里的 style/css、style/js、style/images 这种相对路径。
如果需要让域名直接访问该主页，把上传目录作为站点根目录，或在 Nginx/Apache 里把该目录配成 root 即可。
需要替换背景图时，优先替换 style/css/img/bg1.jpg 到 bg5.jpg 五张图，保持文件名不变即可保留原有视觉节奏。
桌面端背景视频默认不开启，要启用就在第四屏的 cd-bg-video-wrapper 容器上保留 data-video 属性，并在指定路径放好 mp4 与 webm 视频源即可。
百度搜索建议默认引用 opensug.js，部署到内网或离线环境时建议在弹出层注释掉这一行 script。
截图与演示说明
首页截图展示了整站最常见的三屏状态，第一屏「任某某」简介配的是笔记本电脑与代码编辑器背景图，左侧文字堆叠介绍人物标签，红色「查看详情」按钮走 href 跳到外部站点。
第二屏切换到「说走就走」旅行主题，背景是黄昏河面小船，文字层覆盖在中央，导航标记随之移动到「旅行」位置。
第三屏「观点与分享」博客页用浅灰笔记本与钢笔做底图，是五屏里最安静的一屏，适合做长内容入口。
每屏底部都有一组五个图标导航（简介、博客、影视、圈子、旅行），点击会触发 main.js 里的 nextSlide 或 prevSlide，左侧红色游标会平滑滑动到对应位置。
整个主页不依赖任何后台，所有屏都是写在 ul.cd-hero-slider 里的 li 节点，二次开发时直接增删 li 即可增减屏数。
常见问题
问：移动端打开背景视频会消耗很多流量吗？
不会，main.js 里的 uploadVideo 函数会判断容器是否可见，移动端 cd-bg-video-wrapper 默认被 CSS 隐藏，因此不会加载视频元素，更不会自动播放。
问：自动播放的间隔时间能改吗？
可以，main.js 第 12 行的 autoPlayDelay = 5000 控制自动播放间隔，单位是毫秒，把 5000 改成其它数值即可调整切换速度。
问：想去掉右下角返回顶部按钮怎么办？
在 index.html 里删掉 div class=”to-top” 节点，同时把 GeeYo.js 里相关的滚动监听代码也注释掉，避免残留的事件监听造成性能浪费。
问：百度搜索建议接口被替换怎么办？
index.html 末尾引用了 https://www.baidu.com/js/opensug.js，如果访问不到百度可以把这一行 script 注释掉，搜索框会变成普通文本框继续工作。
问：怎么把简繁切换按钮改成顶部导航里的一个图标？
gb2big5.js 提供了 StranBody 函数，把它绑定到任意带 id 属性的元素上即可，调用一次就能切换整页简繁体，状态用 cookie 保存。
安全风险提示
特别提示，本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
下载后请先在本地完整解压，确认 index.html 能正常打开后再上传到生产环境，避免因传输不完整导致页面错乱。
源码包含外部 CDN 资源引用（百度的 opensug.js），若部署在隔离网络环境，请评估离线后页面功能的可用性。
