如何根据活动幻灯片更改身体背景颜色？
我正在使用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。
为什么索引没有重新启动？
Swiper将其数组索引移位1。如文档中所示
因此，您正确地从索引开始，1但没有考虑索引中的第11个项目12
您可以this.realIndex根据文档使用来获取循环项的正确索引。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用幻灯片更改UISlider背景颜色
- 2
BXSlider，如何根据可见的幻灯片更改CSS或DIV的颜色
- 3
是否有API将PowerPoint幻灯片放映窗口的背景颜色从黑色更改？
- 4
如何同时切换背景颜色和幻灯片？
- 5
如何在LibreOffice Impress中为幻灯片定义自定义颜色背景？
- 6
jQuery Cycle2滑块-数字寻呼机如何更改活动幻灯片的属性
- 7
如何显示特定幻灯片的活动幻灯片编号
- 8
如何更改网站正文元素的背景以使其与幻灯片显示相对应？
- 9
如何使用Python通过powercfg更改桌面背景设置幻灯片显示？
- 10
根据元素宽度更改幻灯片数量
- 11
根据当前幻灯片高度动态更改 div 的高度
- 12
如何在不将每张幻灯片设置为一个背景的情况下更改每张幻灯片的数据属性？
- 13
如何定位自举轮播的活动幻灯片？
- 14
如何在幻灯片中的可见幻灯片上添加“活动”类？
- 15
如何在幻灯片更改时更改 img 的 href
- 16
如何将幻灯片放到背景上？
- 17
如何为nav> ul标签制作背景幻灯片？
- 18
如何选择具有此ID的类以触发事件/如何更改每张幻灯片的标题颜色？
- 19
如何打开Bootstrap Carousel幻灯片以进行滚动更改？
- 20
幻灯片更改时如何触发事件
- 21
如何在幻灯片菜单中动态更改textview？
- 22
如何让我的幻灯片停止更改尺寸？
- 23
如果幻灯片已更改，如何停止视频？
- 24
如何分离幻灯片
- 25
无法获取活动幻灯片的索引
- 26
在图像幻灯片的幻灯片中更改图像
- 27
锥的背景幻灯片图片
- 28
jQuery幻灯片从左+暗淡的背景
- 29
背景色幻灯片过渡
我来说两句