Swiper库实现轮播和图片镜头拉近JS效果

分类： 原创 前端编程
  • 发布： 2025-08-12 15:17
  • 最后更新： 2025-08-12 15:17

最近在升级博客的界面，用到 swiper 做轮播图的各种切换效果。这里贴出一个实例。可以直接拿去用。轮播图的各种参数配置，可以参见 swiper 的配置文档。网上搜下到处都是。另外通过样式来实现图片的一个动画的缩放效果。这里用了两种方式来实现。

swiper version: 11.2 注意，不同版本的语法，稍微有些差异。

Swiper库实现轮播和图片尽头拉近JS效果最终示例代码

swiper轮播图图片镜头拉近效果.jpg

文字的蒙层效果，需要自己实现下，也很简单，通过position:absolute即可实现。

方法一，通过样式控制图片的的缩放效果

html 复制 
<html>
<head>
    <!-- CSS 样式 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
	<!-- JavaScript 核心库（包含所有模块） -->
	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <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-container {
      position: relative;
      width: 500px;
      height: 500px;
      overflow: hidden;
    }
    .swiper-slide img{
  		width:100%;
  		height:auto;
  		min-height:100%;
  		transition:1s linear 2s;
  		transform:scale(1.1,1.1);
		}
    .swiper-slide-active img,.swiper-slide-duplicate-active img{
  		transition:6s linear;
  		transform:scale(1,1);
		}	
  </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="https://p8.itc.cn/q_70/images03/20230227/5c05fcbe3aff43a2a08019e1a37e59b3.jpeg" alt="这里是图片"/></div>
          <div class="swiper-slide"><img src="https://img95.699pic.com/xsj/2k/49/mh.jpg!/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast"></div>
          <div class="swiper-slide"><img src="https://imgs.699pic.com/images/328/265/220.jpg!list1x.v2"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <script>
    var swiper = new Swiper('.swiper-container', {
  	  autoplay: {
    		delay: 5000,
    		disableOnInteraction: false,
  	  },
      speed:500,
      spaceBetween: 30,
      effect: 'fade',
	    loop:true,//必须
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>

方法二，通过 js 来控制动画样式的重绘

html 结构，请参照方法一的代码即可。

ts 复制 
// 样式根据需要来导入，用不到的不用导入
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/effect-cube';
import 'swiper/css/effect-fade';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import Swiper from 'swiper';
import { EffectCoverflow, EffectCube, Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';

// 获取实际的轮播的节点，注意不能用 swiper.slides 中的节点，因为里面可能有克隆的节点，会导致样式失效
const realSlides = Array.from(document.querySelectorAll('.swiper-container .swiper-slide')) ?? [];
var swiperBanner = new Swiper('.swiper-container', {
    modules: [Autoplay, Pagination, EffectFade],
    effect: 'fade',
    loop: true,
    initialSlide: 0,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable :true,
    },
    fadeEffect: {
        crossFade: true
    },
    on: {
        snapIndexChange: (swiper: Swiper) => {
            if (realSlides.length <= 1) {
                return;
            }
            const activeImage = realSlides[swiper.realIndex].querySelector('img');
            if (!activeImage) {
                return;
            }
			// 每次清空样式
            activeImage.style.transition = 'none';
            activeImage.style.transform = `scale(1.3)`;
            // 重绘触发样式更新
            void activeImage.offsetWidth;
            activeImage.style.transform = 'scale(1)';
            activeImage.style.transition = 'transform 3.5s ease-out';
        }
    },
});