Bootstrap滑块图片延迟显示问题：仅切换对应幻灯片时触发淡入

嗨，我来帮你搞定这个Bootstrap滑块的图片淡入问题！你现在遇到的核心问题是：当前代码在页面加载完成后就对所有带.foo类的图片执行淡入，不管它们所在的幻灯片有没有被切换到。要实现只有切换到对应幻灯片时才触发淡入，我们需要利用Bootstrap Carousel自带的切换事件来精准控制。

第一步：先通过CSS默认隐藏图片 #

首先，我们用CSS默认把所有滑块里的目标图片隐藏起来，避免页面加载时图片突然闪现（比用JS隐藏更可靠）：

/* 默认隐藏所有滑块项里的.foo图片 */
.carousel-item .foo {
  display: none;
}

第二步：利用Carousel的切换事件实现精准触发 #

Bootstrap Carousel有个slid.bs.carousel事件，这个事件会在幻灯片切换完成后触发。我们可以监听这个事件，每次切换完成后，只对当前激活的幻灯片里的图片执行淡入操作。同时，页面加载完成后，第一张幻灯片已经是激活状态，所以我们也要单独处理它。

完整的JavaScript代码如下：

$(document).ready(function() {
  // 封装一个函数：处理当前激活幻灯片里的图片淡入
  function fadeInActiveImage() {
    // 找到当前激活的幻灯片中的.foo图片
    const $targetImage = $('.carousel-item.active .foo');
    // 隐藏后延迟1秒（可调整）再淡入，时长2200毫秒
    $targetImage.hide().delay(1000).fadeIn(2200);
  }

  // 页面加载完成后，先处理初始显示的第一张幻灯片
  fadeInActiveImage();

  // 监听滑块切换完成的事件
  $('.carousel').on('slid.bs.carousel', function() {
    // 每次切换完成，触发当前幻灯片图片的淡入
    fadeInActiveImage();
  });
});

代码说明 #

• 我把delay(1)改成了delay(1000)，因为1毫秒的延迟几乎感知不到，你可以根据需求调整这个数值（单位是毫秒）。
• 如果你的滑块有专属ID（比如#myCarousel），记得把.carousel改成#myCarousel，这样能避免页面上多个滑块时的冲突。
• 封装函数fadeInActiveImage是为了复用代码，不管是初始加载还是后续切换，都用同一个逻辑处理。

这样修改后，只有当某张幻灯片被切换到（成为激活状态）时，里面的图片才会延迟淡入，完美解决你之前的问题！

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