源码简介
本套源码是一套黑色风格的响应式全屏滚动单页主页模板,纯前端实现,不依赖任何后端语言或数据库。
它基于 jQuery、Bootstrap 与 CodyHouse Hero Slider 组件,通过 cd-hero-slider 实现整屏分屏切换,配合自动轮播与底部导航标记,交互顺滑。
页面分为简介、博客、影视、圈子、旅行五个分屏区块,其中一个分屏支持背景视频播放,视觉冲击力强。
源码内置移动端响应式适配、IE 低版本提示、搜索弹层、返回顶部按钮以及简繁中文切换脚本,开箱即可作为个人主页或产品落地页使用。
适用场景
1. 个人主页 / 程序员作品集展示
2. 产品介绍或活动宣传的单页落地页
3. 工作室、博主、圈子的炫酷门户首页
技术栈与运行环境
– 前端:HTML5 + CSS3 + JavaScript(jQuery 1.x)
– UI 框架:Bootstrap 3(style/css/bootstrap.min.css、style/js/bootstrap.min.js)
– 滑块组件:CodyHouse Hero Slider(main.js 控制自动轮播与分屏切换)
– 字体图标:Glyphicons(Bootstrap 自带)
– 简繁转换:gb2big5.js
– 运行环境:任意静态服务器(Nginx / Apache)或直接浏览器打开,无需 PHP、MySQL
– 兼容:现代浏览器;旧版 IE 会弹出升级提示(index.html 内 UA 判断)
功能亮点
1. 全屏分屏滚动切换:cd-hero-slider 整屏滑块,点击底部导航或滚动自动切换分屏。
2. 自动轮播与导航标记:main.js 内置 setAutoplay(默认 5000ms)与 updateNavigationMarker,当前分屏高亮指示。
3. 背景视频支持:其中一个分屏为 cd-bg-video,挂载 Tpl/Individual/Style/index/video/video.mp4 作背景视频。
4. 移动端响应式适配:viewport 设置 + Bootstrap 栅格,main.js 处理移动端导航展开/收起。
5. 搜索弹层与返回顶部:GeeYo.js 实现右上角搜索弹窗(跳转百度)与滚动返回顶部按钮。
6. 简繁中文切换:内置 gb2big5.js,可对页面文字做简体/繁体转换。
安装与部署提示
1. 将整个文件夹上传到虚拟主机根目录,或本地用任意静态服务器打开。
2. 浏览器直接访问 index.html 即可预览,无需配置数据库或运行环境。
3. 替换 style/images/logo.png 与 tech-1.png 为自己的 Logo 和头像。
4. 修改 index.html 中五个 li 分屏的标题、描述和链接文案。
5. 如需更换背景视频,替换 Tpl/Individual/Style/index/video/ 下的 video.mp4 即可。
6. 删除或改写 index.html 头部默认站点标题、keyword、description 及页脚「锦鲤源码源码网」占位信息。
截图与演示说明
– 首页 index.html:黑色全屏 Hero 滑块,首屏为左右分栏(文字 + 示例图),其余为整屏文字分屏。
– 底部导航 Tpl/Individual/Style/index:含简介、博客、影视、圈子、旅行五个图标导航项与滑动标记。
– 背景视频分屏:Tpl/Individual/Style/index/video/video.mp4(约 1MB 示例视频)。
– 搜索弹层:点击右上角搜索图标弹出百度搜索框(GeeYo.js 控制)。
– 返回顶部:右下角「↑」按钮,滚动超过 100px 出现。
– 静态资源目录:style/css(bootstrap + style.css)、style/js(jquery、bootstrap、tether、main、GeeYo、gb2big5)、style/images(logo 与示例图)。
常见问题
1. 打开后是空白或样式错乱怎么办?
检查 style/ 与 Tpl/ 目录是否完整上传,CSS/JS 路径为相对路径,必须保持原目录结构。
2. 能不能改成自己的内容?
可以。所有文案在 index.html 的 li 分屏里,图片在 style/images,背景视频在 Tpl 目录,纯静态替换即可,不需要懂后端。
安全风险提示
特别提示:本源码未检测安全风险文件,下载后请务必进行安全审计,删除恶意代码后再部署使用!
下载说明
本源码为纯前端静态模板,仅作学习与个人建站参考,请遵守原作者署名与许可约定。
源码默认包含「锦鲤源码源码网 koicms.com」等原作者占位品牌信息,正式上线前请自行替换为自有内容,避免侵权或误导。
内嵌的百度搜索、简繁转换等第三方脚本可按需保留或移除。
下载包内附 __MACOSX 元数据目录,部署时可忽略或删除。
