如何让自动轮播滑块中当前图片下方显示下一张图片？

问题分析 #

1. 切换空白+仅显示首图：当前动画将.slider元素平移出屏幕（translateX(-100vw)），动画结束后元素停留在视野外，后续设置的背景图完全不可见，导致看起来一直是初始图，切换时出现空白。
2. 数组操作冗余：每次shift()+push()的循环逻辑，因元素已移出屏幕完全无效，且每次重置index=0的操作毫无意义。

修复方案一：淡入淡出无缝切换（单元素） #

保持单个元素，通过背景图切换+透明度过渡实现无空白轮播。

HTML

<div class="slider"></div>

CSS

.slider {
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-image: url("https://raw.githubusercontent.com/rossivk/ipc/main/assets/images/DSC02663.jpg");
    /* 淡入淡出过渡动画 */
    transition: opacity 1.5s ease-in-out;
}

/* 触发淡出的类 */
.slide {
    opacity: 0;
}

JavaScript

const images = ["DSC02663.jpg", "DSC02664.jpg", "DSC02665.jpg"];
const carousel = document.querySelector(".slider");
let currentIndex = 0;

const interval = setInterval(startCarousel, 5000);

function startCarousel() {
    // 计算下一张图的索引（循环取模）
    currentIndex = (currentIndex + 1) % images.length;
    const nextImage = `url(https://raw.githubusercontent.com/rossivk/ipc/main/assets/images/${images[currentIndex]})`;

    // 先触发淡出
    carousel.classList.add("slide");

    // 等待淡出动画结束后切换背景，再恢复透明度（淡入）
    setTimeout(() => {
        carousel.style.backgroundImage = nextImage;
        carousel.classList.remove("slide");
    }, 1500); // 时长与CSS过渡时间一致
}

修复方案二：双图层平移切换（保持原动画逻辑） #

用两个重叠图层交替显示当前/下一张图，避免平移时出现空白。

HTML

<div class="carousel-container">
    <div class="slider" style="background-image: url('https://raw.githubusercontent.com/rossivk/ipc/main/assets/images/DSC02663.jpg')"></div>
    <div class="slider"></div>
</div>

CSS

.carousel-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* 平移动画：从右侧进入/左侧退出 */
.slide-in {
    animation: slideIn 1.5s ease-in-out forwards;
}

.slide-out {
    animation: slideOut 1.5s ease-in-out forwards;
}

@keyframes slideIn {
    from { transform: translateX(100vw); }
    to { transform: translateX(0); }
}

@keyframes slideOut {
    from { transform: translateX(0); }
    to { transform: translateX(-100vw); }
}

JavaScript

const images = ["DSC02663.jpg", "DSC02664.jpg", "DSC02665.jpg"];
const slides = document.querySelectorAll(".slider");
let currentIndex = 0;
let activeSlide = 0; // 标记当前显示的图层索引

const interval = setInterval(startCarousel, 5000);

function startCarousel() {
    currentIndex = (currentIndex + 1) % images.length;
    const nextSlide = activeSlide === 0 ? 1 : 0;

    // 设置下一张图的背景并重置位置
    slides[nextSlide].style.backgroundImage = `url(https://raw.githubusercontent.com/rossivk/ipc/main/assets/images/${images[currentIndex]})`;
    slides[nextSlide].classList.remove("slide-in", "slide-out");
    slides[nextSlide].style.transform = "translateX(100vw)";

    // 触发当前图退出、下一张图进入动画
    slides[activeSlide].classList.add("slide-out");
    slides[nextSlide].classList.add("slide-in");

    // 切换活跃图层标记
    activeSlide = nextSlide;
}

关键修复总结 #

• 移除将元素移出屏幕的无效逻辑，改为在视野内切换背景或使用双图层交替显示。
• 用索引递增取模替代冗余的数组shift()+push()操作，实现图片循环。
• 确保动画过程中始终有可见的背景图，彻底解决切换空白问题。

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