网站无限自动轮播Slider故障求助：背景图冗余显示异常

问题分析 #

• 轮播图片残留：DOM元素移动后过渡动画未正确触发，元素样式未及时更新，导致旧位置图片出现视觉残留。
• 左右两侧显示多张：CSS选择器控制的元素范围过大，未隐藏超出显示区域的多余图片，部分元素的定位未完全移出可视区域。

修改后的代码 #

JavaScript #

document.addEventListener("DOMContentLoaded", function() {
  setInterval(rotate, 2000);
});

function rotate() {
  const slider = document.querySelector('.slider');
  const lastChild = slider.lastElementChild.cloneNode(true);
  slider.removeChild(slider.lastElementChild);
  slider.insertAdjacentElement('afterbegin', lastChild);
  // 强制浏览器重绘，确保样式及时更新
  void slider.offsetWidth;
}

CSS #

.container {
  width: 40vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.slider {
  height: 100%;
  width: 100%;
  position: relative;
  align-items: center;
}

.box {
  width: 300px;
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  position: absolute;
  background-color: lightgray;
  /* 默认隐藏所有元素，仅显示指定位置的图片 */
  opacity: 0;
  pointer-events: none;
}

/* 主图（中间） */
.box:nth-child(3) {
  width: 20vw;
  height: 40vh;
  transform: scale(1) translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  color: #fff;
}

/* 左侧图片 */
.box:nth-child(2) {
  transform: scale(0.6) translate(-50%, -50%);
  top: 30%;
  left: 15%;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

/* 右侧图片 */
.box:nth-child(4) {
  transform: scale(0.6) translate(-50%, -50%);
  top: 30%;
  left: 85%;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

/* 隐藏多余元素 */
.box:first-child,
.box:nth-child(n+5) {
  transform: scale(0.2) translate(-50%, -50%);
  left: -100%;
  opacity: 0;
}

HTML #

<div class="container">
  <div class="slider">
    <div class="box" style="background-image: url('https://picsum.photos/200/300?a')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?b')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?c')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?d')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?e')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?f')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?g')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?h')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?i')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?j')"></div>
  </div>
</div>

修复说明 #

1. 图片残留问题：DOM操作后添加void slider.offsetWidth;强制浏览器重绘，确保元素样式及时更新，配合过渡动画消除视觉残留。
2. 两侧显示多张问题：通过CSS默认隐藏所有.box元素，仅保留中间主图、左侧1张、右侧1张元素显示，其余元素设置为透明并移出可视区域，确保左右仅各显示一张图片。

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