如何根据活动幻灯片更改正文背景颜色？

Question

我正在使用 Swiper（没有 jQuery，纯 JavaScript）来显示 11 张幻灯片。background-color我想根据用户所在的幻灯片更改正文。

此代码工作正常，但当滑块重新启动时，它会保留最后一张幻灯片的颜色，而不是从第一张幻灯片重新开始：

 swiper.on('transitionEnd', function(e) {

     if (this.activeIndex == 1) {

       document.querySelector("body").style.background = '#F4F1C1';

     }

     if (this.activeIndex == 2) {

       document.querySelector("body").style.background = '#DCDDDE';

     }

     if (this.activeIndex == 3) {

       document.querySelector("body").style.background = '#ECEBDF';

     }

     if (this.activeIndex == 4) {

       document.querySelector("body").style.background = '#F2E3E3';

     }

     if (this.activeIndex == 5) {

       document.querySelector("body").style.background = '#D0EFF0';

     }

 });

在这个 JSFiddle上，您可以看到在幻灯片 11 之后，滑块返回到幻灯片 1，但颜色仍然是 ，#999999而不是#F4F1C1。

为什么索引没有重新启动？

Answer 1

Swiper 将其数组索引移动 1。如文档中所示所以你正确地从 index 开始1但没有考虑 index 的第 11 项12您可以this.realIndex根据文档使用来获取循环项的正确索引。