【Web APIs】移动端常用的 JavaScript 开发插件 ⑤ ( Swiper 插件案例 - 3D 木马特效 )

韩曙亮2026-01-04 8:48

文章目录

  • [一、Swiper 插件案例 - 3D 木马特效](#一、Swiper 插件案例 - 3D 木马特效)
  • 二、完整流程
    • [1、拷贝并导入 CSS 和 JS 依赖文件](#1、拷贝并导入 CSS 和 JS 依赖文件)
    • [2、修改 HTML 结构](#2、修改 HTML 结构)
    • [3、拷贝 CSS样式](#3、拷贝 CSS样式)
    • [4、拷贝 JS 脚本](#4、拷贝 JS 脚本)
    • 5、样式调整
  • 三、完整代码示例
    • [1、HTML 代码 - index.html](#1、HTML 代码 - index.html)
    • [2、CSS 样式代码 - index.css](#2、CSS 样式代码 - index.css)
    • [3、JS 脚本代码 - index.js](#3、JS 脚本代码 - index.js)
    • 4、执行效果

博客代码下载 : https://download.csdn.net/download/han1202012/92530885

一、Swiper 插件案例 - 3D 木马特效

1、需求说明

在 Swiper 基础案例 页面 https://www.swiper.com.cn/demo/index.html 中 , 看到有一种酷炫的 3D 木马特效 的 轮播图 ;

上述特效的名称是 " 特效 / 滚动(240) " ;

到 Swiper 插件下载页面 https://www.swiper.com.cn/download/index.html 下载的 swiper-11.0.3.zip 压缩包解压的 swiper-11.0.3\swiper\demo\ 目录中查找 240 号示例代码 , 是 240-effect-coverflow.html 代码 ;

使用上述 Swiper 插件 将 【Web APIs】移动端轮播图案例 ( 轮播图自动播放 | 设置无缝衔接滑动 | 手指滑动轮播图 | 完整代码示例 ) 博客的案例 改为上述 3D 木马特效 ;

实现如下效果 :

2、官方示例代码

240-effect-coverflow.html 代码内容如下 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-4.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-5.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-6.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-7.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-8.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-9.jpg" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
</body>

</html>

二、完整流程

参考 Swiper 插件的官方开发流程 https://www.swiper.com.cn/usage/index.html 进行开发 ;

1、拷贝并导入 CSS 和 JS 依赖文件

在 240-effect-coverflow.html 代码中 , 导入了 JS 文件 swiper-bundle.min.js ,

html 复制代码 
  <!-- Swiper JS -->
  <script src="../swiper-bundle.min.js"></script>

导入了 CSS 样式文件 swiper-bundle.min.css ;

html 复制代码 
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../swiper-bundle.min.css" />

这两个文件都在 swiper-11.0.3\swiper 目录中 ;

分别将其拷贝到 工程 的对应目录 , 并在 HTML 代码中导入 ;

HTML 导入外部文件代码 :

html 复制代码 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Swiper 插件实现移动端轮播图</title>
    <!-- 引入 css 初始化文件 : normalize.css 是一个跨浏览器的 CSS 样式标准化方案 , 
     核心目标是抹平不同浏览器之间的 HTML 元素默认样式差异 , 
     让页面在各种现代浏览器 ( Chrome、Firefox、Safari 等 ) 中呈现出一致的基础外观 , 
     同时避免不必要的样式重置 , 提升前端开发的效率和兼容性 ;  -->
    <link rel="stylesheet" href="css/normalize.css">

    <!-- 引入 swiper 插件的 css文件 -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <!-- 引入自己写的样式 , 本案例为空 -->
    <link rel="stylesheet" href="css/index.css">

    <!-- 引入 swiper 插件的 js 文件 -->
    <script src="js/swiper-bundle.min.js"></script>

    <!-- 引入自己写的脚本 , 本案例为空 -->
    <script src="js/index.js"></script>
</head>

2、修改 HTML 结构

240-effect-coverflow.html 代码中的 HTML 结构如下 ;

html 复制代码 
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-4.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-5.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-6.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-7.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-8.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-9.jpg" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

这里我们将其修改 , 显示如下指定的三张图像 , 注意 HTML 结构 和 标签上的类名不能修改 ;

html 复制代码 
<body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./images/focus1.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="./images/focus2.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="./images/focus3.jpg" />
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</body>

3、拷贝 CSS样式

将 CSS样 式直接 拷贝到 index.css 代码文件中 , 这是自己写的 样式文件 ;

需要拷贝的代码 :

css 复制代码 
.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

4、拷贝 JS 脚本

下面的代码是 Swiper 插件的初始化 的 JS 代码 , 直接拷贝到 index.js 代码文件中

javascript 复制代码 
    var swiper = new Swiper(".mySwiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true,
        },
        pagination: {
            el: ".swiper-pagination",
        },
    });

5、样式调整

浏览器 中查看代码 , 发现样式如下 :

将 .swiper-slide 的 宽高由 300 x 300 像素修改为 300 x 180 像素 ;

css 复制代码 
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 180px;
}

修改后的样式如下 :

三、完整代码示例

1、HTML 代码 - index.html

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Swiper 插件实现移动端轮播图</title>
    <!-- 引入 css 初始化文件 : normalize.css 是一个跨浏览器的 CSS 样式标准化方案 , 
     核心目标是抹平不同浏览器之间的 HTML 元素默认样式差异 , 
     让页面在各种现代浏览器 ( Chrome、Firefox、Safari 等 ) 中呈现出一致的基础外观 , 
     同时避免不必要的样式重置 , 提升前端开发的效率和兼容性 ;  -->
    <link rel="stylesheet" href="css/normalize.css">

    <!-- 引入 swiper 插件的 css文件 -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <!-- 引入自己写的样式 , 本案例为空 -->
    <link rel="stylesheet" href="css/index.css">

    <!-- 引入 swiper 插件的 js 文件 -->
    <script src="js/swiper-bundle.min.js"></script>

    <!-- 引入自己写的脚本 , 本案例为空 -->
    <script src="js/index.js"></script>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./images/focus1.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="./images/focus2.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="./images/focus3.jpg" />
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</body>

</html>

2、CSS 样式代码 - index.css

css 复制代码 
body {
    /* 定义页面全局基础容器 ( body标签 ) 的样式 */
    /* 限制页面最大宽度为540px , 适配大屏手机 , 防止页面过宽导致布局变形 */
    max-width: 540px;
    /* 限制页面最小宽度为320px , 适配小屏手机 , 保证核心内容不会被挤压无法显示 */
    min-width: 320px;
    /* 给body设置1200px高度 , 撑开页面布局 , 便于查看轮播效果 , 避免高度塌陷 */
    height: 1200px;
    /* 上下外边距为0 , 左右外边距自动分配 , 实现页面在屏幕中水平居中对齐 */
    margin: 0 auto;
    /* 统一设置字体样式 : 正常字重、14px字号、1.5倍行高 , 同时指定多字体族兼顾不同系统兼容性 */
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    /* 设置页面默认文字颜色为纯黑色 */
    color: #000;
    /* 设置页面背景色为浅灰色 , 提升视觉舒适度 , 区分页面内容与背景 */
    background: #f2f2f2;
    /* 隐藏水平方向溢出的内容 , 防止出现水平滚动条 , 保证移动端布局整洁 */
    overflow-x: hidden;
    /* 清除webkit内核浏览器中 , 移动端点击元素时出现的默认高亮背景色 */
    -webkit-tap-highlight-color: transparent;
}


/* 下面是复制swiper css样式 */

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 180px;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

3、JS 脚本代码 - index.js

javascript 复制代码 
// 监听整个窗口的load事件 , 页面所有资源 ( DOM、图片等 ) 加载完成后执行内部逻辑 , 避免DOM未加载完成获取不到元素
window.addEventListener('load', function() {

    var swiper = new Swiper(".mySwiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true,
        },
        pagination: {
            el: ".swiper-pagination",
        },
    });

})

4、执行效果

相关推荐
JS_GGbond26 分钟前
前端大扫除：JS垃圾回收与那些“赖着不走”的内存泄露
前端
葡萄城技术团队31 分钟前
轻量级部署：SpreadJS 包依赖优化与打包体积瘦身秘籍
前端
阿湯哥33 分钟前
Design Token 详解
前端
json{shen:"jing"}38 分钟前
08_组件基础
前端·javascript·vue.js
嚣张丶小麦兜40 分钟前
docker的简单应用
前端·docker
菩提祖师_43 分钟前
基于VR的虚拟会议系统设计
开发语言·javascript·c++·爬虫
代码猎人1 小时前
instanceof 运算符的实现原理是什么，如何实现
前端
Erishen1 小时前
🚀 重新定义前端组件安装体验：shadcn + Bun 的极致开发效率
前端
冬奇Lab1 小时前
Vercel部署全攻略:从GitHub到上线,10分钟让你的前端项目免费拥有自己的域名
前端·后端·node.js
牛马1111 小时前
Flutter Web性能优化标签解析
前端·flutter·性能优化
热门推荐
01GitHub 镜像站点02手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04jdk21下载、安装（Windows、Linux、macOS）05Linux下V2Ray安装配置指南062025 最新教程：注册并切换到美区 Apple ID07GitLab 零基础入门指南：从安装到项目管理全流程08Claude Code Skills 实用使用手册09UV安装并设置国内源10Labelme从安装到标注：零基础完整指南