使用jQuery Slick轮播切到指定滑块时能否修改页面body背景？

这个需求可以直接实现，核心调用Slick轮播自带的afterChange事件回调即可，该回调会在每次滑块切换完成后自动触发，不需要额外点击、悬停等交互操作。

原有代码问题说明 #

你写的现有代码存在两个核心错误：

• $('.carousel').slick('slickGoTo', 1)是主动控制轮播跳转到索引为1的滑块的操作方法，返回值为jQuery对象，无法用来判断当前展示的滑块索引
• document.getElementsByTagName("body")返回的是HTML元素集合，需要取下标[0]才能拿到body元素，直接设置style属性会抛出报错

正确实现代码 #

首先提前定义每个滑块索引对应的背景配置，再在Slick初始化时绑定切换事件即可：

// 按滑块索引顺序配置对应背景，索引和滑块顺序一一对应
const slideBgList = [
  'url(第一张滑块对应背景图地址)',
  'url(第二张滑块对应背景图地址)',
  'url(第三张滑块对应背景图地址)'
  // 有更多滑块继续往后加即可
]

// 初始化前绑定init事件，保证页面刚加载时就显示第一张滑块对应的背景
$('.carousel').on('init', function (event, slick) {
  document.body.style.background = slideBgList[0]
})

// 绑定切换完成事件，每次滑块切换后自动修改背景
$('.carousel').on('afterChange', function (event, slick, currentIndex) {
  document.body.style.background = slideBgList[currentIndex]
  // 如果要切换到指定滑块时跳转页面，加判断即可
  // if (currentIndex === 1) {
  //   location.href = '跳转目标页面地址'
  // }
})

// 初始化slick，保留你原有配置即可
$('.carousel').slick({
  autoplay: true,
  // 其他原有配置项
})

额外说明 #

如果不需要修改整个body的背景，仅需要修改轮播所在区域的背景，把document.body替换成对应区域的DOM元素即可。

内容的提问来源于stack exchange，提问作者Paige