如何根据活动幻灯片更改正文背景颜色?
How can I change body background color depending on active slide?
我正在使用 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';
}
});
在 this JSFiddle 上,您可以看到在幻灯片 11 之后,滑块返回到幻灯片 1,但颜色仍然是 #999999
而不是 #F4F1C1
.
为什么索引没有重新启动?
Swiper 将其数组索引移动 1。如文档中所示
所以你 正确地 从索引 1
开始,但不考虑索引 12
处的第 11 项
您可以根据文档使用this.realIndex
来获取循环项的正确索引。
我正在使用 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';
}
});
在 this JSFiddle 上,您可以看到在幻灯片 11 之后,滑块返回到幻灯片 1,但颜色仍然是 #999999
而不是 #F4F1C1
.
为什么索引没有重新启动?
Swiper 将其数组索引移动 1。如文档中所示
所以你 正确地 从索引 1
开始,但不考虑索引 12
您可以根据文档使用this.realIndex
来获取循环项的正确索引。