JavaScript 实现 3D 立体轮播图：HTML/CSS/JS 完整代码解析

远山来客

发布时间：2026-10-15 | 5人浏览过

原创

利用 JavaScript 结合 CSS 绝对定位与遮罩层透明度技术，打造具有视觉纵深的 3D 立体图片轮播效果。本文提供完整的 HTML 结构、CSS 布局参数及核心 JS 切换算法源码。

结果预览

该实例通过多层图片的大小差异、Z-index 层级堆叠以及半透明遮罩（opacity），营造出近大远小、朦胧清晰的 3D 视觉体验。用户可以通过点击两侧箭头或中间的透明区域触发切换动画。

准备条件

实现此效果需要三个核心部分：用于承载内容的 HTML 结构、控制位置与样式的 CSS 样式表，以及处理图片数据源与切换逻辑的 JavaScript 脚本。

第1步：构建 HTML 层级结构

目的：建立包含主容器、前后导航按钮、中间可见图片层及覆盖其上的半透明遮罩层的 DOM 树。

入口文件：创建一个标准的 HTML5 页面，引入外部 CSS 和 JS 文件。
容器定义：使用 <div id="pic_browser"> 作为相对定位的视口容器。
元素排列：在容器内依次放置左侧箭头 <img class="prev" ... />、7 个占位图片（img1-img7）、3 个关键遮罩层（mask1-mask3 及其对称的 mask5-mask7）以及右侧箭头 <img class="next" ... />。
交互绑定：为导航图片和遮罩层添加 onclick 事件，调用 jzk.ui.moveImg() 函数并传入偏移量（如 1 或 -1）。

<div id="pic_browser">
    <img class="prev" src="images/prev.png" onclick="javascript:jzk.ui.moveImg(-1);"/>
    <!-- 中间图片与遮罩交错排列 -->
    <img id="img1" ... /> <div class="mask3" ...></div>
    <img id="img2" ... /> <div class="mask2" ...></div>
    <img id="img3" ... /> <div class="mask1" ...></div>
    <img id="img4" ... />
    <!-- 右侧对称结构... -->
    <img class="next" src="images/next.png" onclick="javascript:jzk.ui.moveImg(1);"/>
</div>

第2步：设置 CSS 空间布局与视觉效果

目的：利用绝对定位将图片按固定尺寸和坐标堆叠，并通过 opacity 属性实现前景清晰、背景朦胧的层次感。

容器样式：#pic_browser 设置为 position: relative，宽 860px，高 192px，作为内部元素的定位基准。
图片定位：所有 img 标签均设为 position: absolute。
Z-Index 层级：中心图片 #img4 层级最高（z-index: 7），向两侧逐级递减（z-index: 6, 5, 4），确保遮挡关系正确。
遮罩效果：.mask1（中心附近）不透明度设为 0.3，.mask3（边缘）设为 0.7，配合白色背景 #fff，产生柔和的蒙版过渡效果。

#pic_browser { width: 860px; height: 192px; position: relative; }
#pic_browser img { position: absolute; border: none; }

/* 中心图片最大 */
#img4 { width: 290px; height: 192px; left: 285px; top: 0px; z-index: 7; }

/* 两侧图片渐小 */
#img3, .mask1 { width: 226px; height: 150px; left: 175px; top: 21px; z-index: 6; }
#img2, .mask2 { width: 166px; height: 110px; left: 95px; top: 41px; z-index: 5; }
#img1, .mask3 { width: 106px; height: 70px; left: 45px; top: 61px; z-index: 4; }

/* 遮罩透明度设置 */
.mask1, .mask5 { opacity: 0.3; }
.mask2, .mask6 { opacity: 0.5; }
.mask3, .mask7 { opacity: 0.7; }

第3步：编写 JavaScript 逻辑与数据管理

目的：维护图片资源数组，通过计算当前起始索引，动态更新屏幕上 7 个图片标签的 src 属性，实现无缝循环切换。

数据结构：定义 var imgArray 存储图片路径，使用 var base = 0 记录当前显示序列在数组中的起始下标位置。
初始化：window.onload 时调用 jzk.app.initImg()，首次加载即调用 moveImg(7) 预填充 7 张图片。
核心算法 moveImg(offset)：

更新基准线：根据点击方向调整 base 值（向右移 offset 为正，向左为负）。
边界检查与取模：遍历 7 个图片节点。若计算出的数组下标 i 小于 0，则从数组末尾倒推取值；若大于等于数组长度，则从头开始取余。这实现了数据的无限循环。
DOM 操作：document.getElementById('img'+(i-base+1)) 精确定位对应的图片元素，并赋予新的 imgArray[...

var imgArray = [
    'images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg',
    'images/5.jpg', 'images/6.jpg', 'images/7.jpg'
];
var base = 0;

jzk.ui.moveImg = function(offset) {
    base = (base - offset);
    for (var i = base; i < base + 7; i++) {
        var img = document.getElementById('img' + (i - base + 1));
        if (i < 0) {
            img.src = imgArray[imgArray.length + i];
        } else if (i >= imgArray.length - 1) {
            // 注意：原代码此处逻辑为 i > length-1 时取余，需确保数组访问不越界
            img.src = imgArray[i % imgArray.length]; 
        } else {
            img.src = imgArray[i];
        }
    }
};

jzk.app.initImg = function() {
    jzk.ui.moveImg(7);
}