swiper 实现轮播图效果(图片渐行渐远，文字从中间向四周浮现)

废话不多说上效果图
在这里插入图片描述
源码
HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="containerBoxLBT">
  <div class="swiper-button-next swiper-icon"></div>
  <div class="swiper-button-prev swiper-icon"></div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141712.webp">
        <div class="title">
          <span>狗是人类最好的朋友</span>
          <p>Dogs are man's best friend</p>
        </div>
      </div>
      <div class="swiper-slide">
        <img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141720.webp">
        <div class="title">
          <span>健康是财富</span>
          <p>Health is wealth.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141722.webp">
        <div class="title">
          <span>时间是最珍贵的财富</span>
          <p>Time is the most precious wealth</p>
        </div>
      </div>
      <div class="swiper-slide">
        <img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141725.webp">
        <div class="title">
          <span>爱是世界上最强大的力量</span>
          <p>Love is the most powerful force in the world</p>
        </div>
      </div>
      <div class="swiper-slide">
        <img src="https://cbypicimg.oss-cn-hangzhou.aliyuncs.com/MyPicImg/202304242141728.webp">
        <div class="title">
          <span>明天是新的一天</span>
          <p>Tomorrow is a new day</p>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<style>
  body {
    margin: 0;
    padding: 0;
  }
  @keyframes imgScale {
    0% {
      transform: scale(1.5);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes revealText {
    0% {
      clip-path: inset(0 50% 0 50%);
    }

    100% {
      clip-path: inset(0 0 0 0);
    }
  }

  .containerBoxLBT {
    width: 100%;
    height: 100%;
  }

  .containerBoxLBT .swiper-button-next::after,
  .containerBoxLBT .swiper-button-prev::after {
    color: rgba(255, 255, 255, 0.84);
    font-size: 24px;
  }

  .containerBoxLBT .swiper-container {
    width: 100%;
    height: 100%;
  }

  .containerBoxLBT .swiper-container .swiper-wrapper {
    position: relative;
  }

  .containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide {
    overflow: hidden;
  }

  .containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 910px;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .swiper-pagination-bullet {
    background-color: white;
  }

  .addAnimationText {
    display: inline-block;
    clip-path: inset(0 50% 0 50%);
    animation: revealText 3s 1 forwards;
  }

  .addAnimationImg {
    animation: imgScale 3s 1 forwards;
  }

  .containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translateY(-50%) translateX(-50%);
    color: white;
    text-align: center;
    font-weight: bold;
  }


  .containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title :first-child {
    font-size: 60px;
    letter-spacing: 5px;
  }

  .containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title :last-child {
    font-size: 20px;
    letter-spacing: 2px;
  }
</style>

JS部分(公司有Jquery索性有用了，可以参照着写原生JS)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script>
  // .containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide .title
  // 初始化轮播图，具体参数请参考swiper官网 版本号5.4.5
  var swiper = new Swiper('.containerBoxLBT .swiper-container', {
  	// 一次展示几张图
    slidesPerView: 1,
    // 方向设定
    direction: getDirection(),
    // 设定切换按钮
    navigation: {
      nextEl: '.containerBoxLBT .swiper-button-next',
      prevEl: '.containerBoxLBT .swiper-button-prev',
    },
    // 中间指示小点，自定义可参考官方文档
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    observer: true,
    on: {
      // 初始化，立即执行下面中的代码
      init: function() {
        let swiperSlide = $('.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide')
        $(swiperSlide[0].children[0]).addClass('addAnimationImg')
        $(swiperSlide[0].children[1]).addClass('addAnimationText')
        $(swiperSlide[0].children[0]).on('animationend',function(){
          $(swiperSlide[0].children[0]).removeClass('addAnimationImg')
        })
        $(swiperSlide[0].children[1]).on('animationend',function(){
          $(swiperSlide[0].children[1]).removeClass('addAnimationText')
        })
      },
      resize: function() {
        swiper.changeDirection(getDirection());
      },
      // 监听轮播图切换，可以通过this.activeIndex获取当前活跃的轮播图
      slideChange: function() {
        let activeIndex = this.activeIndex
        let swiperSlide = $('.containerBoxLBT .swiper-container .swiper-wrapper .swiper-slide')
        $(swiperSlide[activeIndex].children[0]).addClass('addAnimationImg')
        $(swiperSlide[activeIndex].children[1]).addClass('addAnimationText')
        $(swiperSlide[activeIndex].children[0]).on('animationend',function(){
          $(swiperSlide[activeIndex].children[0]).removeClass('addAnimationImg')
        })
        $(swiperSlide[activeIndex].children[1]).on('animationend',function(){
          $(swiperSlide[activeIndex].children[1]).removeClass('addAnimationText')
        })
      },
    }
  });

  // 轮播图方向设置
  function getDirection() {
    var windowWidth = window.innerWidth;
    var direction = window.innerWidth <= 760 ? 'vertical' : 'horizontal';
    return direction;
  }
</script>

动画效果实现，使用了clip-path属性
具体特性可参考MDN