JS实用功能-3、Swiper插件 滚动自动切换标题

在HTML日常开发中在需要Banner图滚动需求，我们往往都会使用Swiper插件，Swiper的强大往往是吸引我们的地方。

下面给大家介绍一下在滚动图片的情况下，自动切换标题的功能。先看一下实现后的效果图：

从上图可以看到，在banner滚动的时候，底部的标题也是跟着切换了

先说一下JS实现方法：

Swiper中有个on下的sildeChangeTransitionStart的监听函数，可以监听swiper-silde切换，里面有个activeIndex，指向的是当前swiper-silde的数组下标

const titleList = [\'智联线上招聘会\',\'猎聘线上招聘会\',\'一览线上招聘会\'];

const mySwiper = new Swiper(\'.news-banner\',{
    autoplay: true,
    pagination: {
      el: \'.swiper-pagination\',
    },
    on: {
      slideChangeTransitionStart: function() {
        const index = Number(this.activeIndex);
        document.getElementById(\'title\').innerText = titleList[index];
      }
    },
  });

this.activeIndex 指向的是当前滚动的swiper-silde下标，当触发on的时候，就更换标题。