如何实现全屏垂直轮播的无缝无限循环效果？

我正在为个人摄影作品集开发一款全屏垂直轮播，已经完成基础滑块功能，现在想实现无限循环效果：

• 滚动到最后一项时，点击button-down按钮能无缝切换到第一项，而非直接滚动回顶部
• 在第一项时，点击button-up按钮能无缝切换到最后一项

我尝试修改nextSlide的赋值逻辑，结果轮播直接跳转到首尾端，完全没有无缝过渡的效果。作为新手开发者，求解决方案和指导。

现有代码 #

HTML #

<div class="carousel-wrapper">
    <div class="carousel-content">
        <div class="carousel-item active-item">
            <img loading="lazy" class="carousel-image" src="https://via.placeholder.com/800x350/0bf?text=image1" alt="">
        </div>
        <div class="carousel-item">
            <img loading="lazy" class="carousel-image" src="https://via.placeholder.com/800x350/0bf?text=image2" alt="">
        </div>
        <div class="carousel-item">
            <img loading="lazy" class="carousel-image" src="https://via.placeholder.com/800x350/0bf?text=image3" alt="">
        </div>
        <div class="carousel-item">
            <img loading="lazy" class="carousel-image" src="https://via.placeholder.com/800x350/0bf?text=image4" alt="">
        </div>
    </div>
    <button class="carousel-button button-up">
        <img src="media/arrow-sm-up-svgrepo-com.svg" alt="">
    </button>
    <button class="carousel-button button-down">
        <img src="media/arrow-sm-down-svgrepo-com.svg" alt="">
    </button>
</div>

CSS #

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.carousel-content {
    height: 100%;
    width: 100%;
    transition: all 1s;
}

.carousel-item {
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    border: 0;
    color: white;
    scale: 5;
}

.button-down {
    left: 50px;
}

.button-up {
    right: 50px;
}

.carousel-button img {
    width: 12px;
}

无循环效果的JavaScript #

const track = document.querySelector('.carousel-content');
const slides = Array.from(track.children);

const slideDownButton = document.querySelector('.button-down');
const slideUpButton = document.querySelector('.button-up');

const slideHeight = slides[0].getBoundingClientRect().height;

const setSlidePosition = (slide, index) => {
    slide.style.top = slideHeight * index + 'px';
};
slides.forEach(setSlidePosition);

const moveToSlide = (track, currentSlide, targetSlide) => {
    track.style.transform = 'translateY(-' + targetSlide.style.top + ')';
    currentSlide.classList.remove('active-item');
    targetSlide.classList.add('active-item');
}

slideUpButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.active-item');
    const nextSlide = currentSlide.previousElementSibling;

    moveToSlide(track, currentSlide, nextSlide);
});

slideDownButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.active-item');
    const nextSlide = currentSlide.nextElementSibling;

    moveToSlide(track, currentSlide, nextSlide);
});

尝试实现循环但有问题的JavaScript #

slideUpButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.active-item');
    const nextSlide = currentSlide.previousElementSibling || slides[slides.length - 1];

    moveToSlide(track, currentSlide, nextSlide);
});

slideDownButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.active-item');
    const nextSlide = currentSlide.nextElementSibling || slides[0];

    moveToSlide(track, currentSlide, nextSlide);
});

问题原因 #

你当前的实现之所以会直接跳转，核心问题是：

• 从最后一项切到第一项时，targetSlide.style.top为0px，容器直接从translateY(-300vh)跳转到translateY(0)，没有过渡动画
• 从第一项切到最后一项时，targetSlide.style.top为300vh，容器直接从translateY(0)跳转到translateY(-300vh)，同样无过渡

下面提供两种成熟的无缝循环实现方案：

方案一：克隆首尾元素（视觉无缝最优） #

核心思路：在轮播容器开头克隆最后一个元素，结尾克隆第一个元素。当滚动到克隆元素时，瞬间重置容器位置到真实元素，同时临时关闭过渡动画，用户完全感知不到跳转。

修改后的JavaScript代码

const track = document.querySelector('.carousel-content');
const slides = Array.from(track.children);

const slideDownButton = document.querySelector('.button-down');
const slideUpButton = document.querySelector('.button-up');

const slideHeight = slides[0].getBoundingClientRect().height;

// 克隆首尾元素并插入容器
const firstSlideClone = slides[0].cloneNode(true);
const lastSlideClone = slides[slides.length - 1].cloneNode(true);
firstSlideClone.classList.remove('active-item');
track.appendChild(firstSlideClone);
track.insertBefore(lastSlideClone, slides[0]);

// 更新包含克隆元素的幻灯片数组
const updatedSlides = Array.from(track.children);

// 设置所有元素的位置
updatedSlides.forEach((slide, index) => {
    slide.style.top = `${slideHeight * index}px`;
});

// 初始位置：跳过开头的克隆元素，定位到真实第一个幻灯片
track.style.transform = `translateY(-${slideHeight}px)`;
slides[0].classList.add('active-item');

const moveToSlide = (track, currentSlide, targetSlide) => {
    track.style.transform = `translateY(-${targetSlide.style.top})`;
    currentSlide.classList.remove('active-item');
    targetSlide.classList.add('active-item');
}

// 监听过渡结束，处理克隆元素的位置重置
track.addEventListener('transitionend', () => {
    const currentActive = track.querySelector('.active-item');
    
    // 滚动到结尾克隆元素（原第一个），重置到真实第一个元素位置
    if (currentActive === firstSlideClone) {
        track.style.transition = 'none';
        track.style.transform = `translateY(-${slideHeight}px)`;
        slides[0].classList.add('active-item');
        firstSlideClone.classList.remove('active-item');
        setTimeout(() => track.style.transition = 'all 1s', 10);
    }
    
    // 滚动到开头克隆元素（原最后一个），重置到真实最后一个元素位置
    if (currentActive === lastSlideClone) {
        track.style.transition = 'none';
        track.style.transform = `translateY(-${slideHeight * slides.length}px)`;
        slides[slides.length - 1].classList.add('active-item');
        lastSlideClone.classList.remove('active-item');
        setTimeout(() => track.style.transition = 'all 1s', 10);
    }
});

slideUpButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.active-item');
    const nextSlide = currentSlide.previousElementSibling;
    if (!nextSlide) return;
    moveToSlide(track, currentSlide, nextSlide);
});

slideDownButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.active-item');
    const nextSlide = currentSlide.nextElementSibling;
    if (!nextSlide) return;
    moveToSlide(track, currentSlide, nextSlide);
});

方案二：索引跟踪+无过渡重置（逻辑简单） #

核心思路：用索引跟踪当前位置，正常切换到目标元素后，若为首尾跳转场景，瞬间重置容器位置到逻辑对应点，同时更新元素位置，视觉上实现无缝。

修改后的JavaScript代码

const track = document.querySelector('.carousel-content');
const slides = Array.from(track.children);

const slideDownButton = document.querySelector('.button-down');
const slideUpButton = document.querySelector('.button-up');

const slideHeight = slides[0].getBoundingClientRect().height;
const totalSlides = slides.length;
let currentIndex = 0;

// 设置所有幻灯片的初始位置
slides.forEach((slide, index) => {
    slide.style.top = `${slideHeight * index}px`;
});

// 更新轮播状态
const updateCarousel = () => {
    const targetPosition = slideHeight * currentIndex;
    track.style.transform = `translateY(-${targetPosition}px)`;
    slides.forEach(slide => slide.classList.remove('active-item'));
    slides[currentIndex].classList.add('active-item');
}

// 向下切换逻辑
slideDownButton.addEventListener('click', () => {
    currentIndex++;
    if (currentIndex >= totalSlides) {
        // 先正常过渡到第一项
        track.style.transition = 'all 1s';
        currentIndex = 0;
        updateCarousel();
        
        // 过渡结束后重置位置，模拟无限循环
        const reset = () => {
            track.style.transition = 'none';
            slides[0].style.top = `${slideHeight * totalSlides}px`;
            track.style.transform = `translateY(-${slideHeight * totalSlides}px)`;
            track.removeEventListener('transitionend', reset);
            
            // 恢复过渡，修正元素位置
            setTimeout(() => {
                slides[0].style.top = '0px';
                track.style.transition = 'all 1s';
            }, 10);
        }
        track.addEventListener('transitionend', reset);
    } else {
        track.style.transition = 'all 1s';
        updateCarousel();
    }
});

// 向上切换逻辑
slideUpButton.addEventListener('click', () => {
    currentIndex--;
    if (currentIndex < 0) {
        // 先正常过渡到最后一项
        track.style.transition = 'all 1s';
        currentIndex = totalSlides - 1;
        updateCarousel();
        
        // 过渡结束后重置位置，模拟无限循环
        const reset = () => {
            track.style.transition = 'none';
            slides[totalSlides - 1].style.top = `-${slideHeight}px`;
            track.style.transform = `translateY(${slideHeight}px)`;
            track.removeEventListener('transitionend', reset);
            
            // 恢复过渡，修正元素位置
            setTimeout(() => {
                slides[totalSlides - 1].style.top = `${slideHeight * (totalSlides - 1)}px`;
                track.style.transition = 'all 1s';
            }, 10);
        }
        track.addEventListener('transitionend', reset);
    } else {
        track.style.transition = 'all 1s';
        updateCarousel();
    }
});

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