黑色响应式全屏滚动主页源码

黑色响应式全屏滚动主页源码

  • 全站源码免费
  • 每日/微信/10次解锁
  • 每日/IP/100次解锁
  • 不限制搬运
  • 可有偿提供搭建服务
  • 自动检测网盘是否失效
资源下载
免费资源
立即下载

源码简介

本套源码是一套黑色风格的响应式全屏滚动单页主页模板,纯前端实现,不依赖任何后端语言或数据库。

它基于 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 元数据目录,部署时可忽略或删除。

资源下载
下载价格免费
本文章资源https://www.aosen.cc/mianfei3098.html来源于互联网,如存在侵权,请联系我们立马删除!
0
显示验证码