在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的時候,就更換標題。
本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。