前端代码：高端大气的网站轮播图模板

WebGL 波纹切换效果滑块轮播图前端模板（野生动物保护版）

一款基于 WebGL 位移着色器的全屏滑块，切换时呈现流体波纹过渡，搭配中文文案与 KS 品牌露出，适合展示高质感的公益/品牌故事或案例作品。

亮点卖点

• 波纹切换：自定义 Fragment/Vertex Shader，实现图像间的柔滑位移过渡。
• 平滑动效：GSAP TweenMax 控制切换节奏，图片加载完成后进入全屏动画。
• 本地化资源：three.js r83、imagesLoaded、GSAP、normalize 与图片均本地化，离线可演示。
• 中文文案 + 品牌露出：物种与保护等级全部中文，右上角 KS 主题徽标可直链官网。

设计风格

• 深色背景 + 高对比白色排版，强调图片与波纹效果。
• 导航与分页圆点极简，保持视觉聚焦在滑块内容。
• 字体使用本地 Geist Sans，标题与数值粗细有层次。

适用场景

• 公益/环保专题首屏、品牌故事或案例展示。
• 创意作品集、交互动效示例、技术演示页。
• 需要高质感图片过渡的产品/活动页主视觉。

使用方式

1. 直接打开 index.html 预览（离线可用）。
2. 替换图片：将 assets/img/*.jpg 换成你的素材，并更新 index.html 中的图片路径和对应标题/描述文案。
3. 修改文案：在 index.html 的标题、导航和保护等级文本处调整为你的内容。
4. 调整配色/字体：在 style.css 调整背景色、品牌徽标色，或替换 assets/fonts 字体。

文件结构

• index.html：结构、中文文案、KS 徽标与资源引用。
• style.css：重置样式、排版与主题色。
• script.js：WebGL 位移着色器逻辑、分页切换与动画。
• assets/js/：本地 three.r83、imagesloaded、TweenMax。
• assets/css/normalize.min.css：本地 normalize。
• assets/fonts/GeistVF.ttf：本地字体。
• assets/img/：本地图像素材。

自定义提示

• 想调整过渡强度：在 script.js 的 fragment shader 中修改 intensity 数值。
• 想换成更多/更少页面：在 index.html 中增删 <img> 与对应的标题/状态 <span>，并同步分页按钮。
• 如需接入数据源，可在 script.js 中动态生成图片与标题列表，再传入 displacementSlider 的 images。