jQuery轮播图切换时Div高度跳变问题求助

• 你当前的切换逻辑是等当前图片fadeOut完成后，才移除它的active类，再让下一张图片fadeIn。在这个间隙里，容器#ifdesignbanners里没有任何显示状态的图片，容器高度会瞬间塌成0，就出现了视觉上的跳变。
• 虽然你给图片设了height:150px，但容器是d-inline-block，它的高度完全由内部可见元素决定，没了可见图片自然就撑不住高度了。

给你三种可行的方案，挑一种用就行：

方案一：给轮播容器固定高度 #

直接给容器设置和图片一致的高度，从根源上避免高度坍塌：

#ifdesignbanners {
  height: 150px;
}

方案二：图片重叠布局（绝对定位） #

把所有图片放在同一位置，容器高度始终由图片撑住，切换时不会有空隙：

#ifdesignbanners {
  position: relative;
  height: 150px; /* 固定高度避免图片加载前容器异常 */
}
#ifdesignbanners img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 保持原布局的居中效果 */
  display: none;
  height: 150px;
}
#ifdesignbanners img.active {
  display: block;
}

这种布局下原JS逻辑不用改，因为图片是重叠的，淡入淡出不会有间隙。

方案三：同步淡入淡出 #

修改JS逻辑，让下一张图片和当前图片同步切换，避免出现无图片的间隙：

function swapBanners(){
  var $active = $('#ifdesignbanners .active');
  var $next = $active.next().length > 0 ? $active.next() : $('#ifdesignbanners img:first');
  
  // 先让下一张显示，再隐藏当前的，中间有重叠时间
  $next.fadeIn().addClass('active');
  $active.fadeOut(function(){
    $active.removeClass('active');
  });
}

$(document).ready(function(){
  // 这里直接传函数，比传字符串更规范
  setInterval(swapBanners, 2000);
})

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