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的時候，就更換標題。