如何用Vanilla JavaScript实现类Bootstrap轮播的无限滚动？

我来帮你搞定这个需求！你想要的是横向无限循环滚动（类似Bootstrap Carousel的自动轮播+无缝循环）对吧？纯原生JavaScript就能实现，咱们一步步来：

第一步：调整HTML结构 #

首先得给图片加个容器，这样才能控制滚动区域，修改后的HTML如下：

<!DOCTYPE html>
<html>
<head>
    <title>Infinite Scroll</title>
    <style>
        /* 必要的基础样式，让图片横向排列并限制可视区域 */
        .carousel-container {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-out; /* 平滑滚动过渡 */
        }
        .carousel-inner img {
            width: 100%;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-inner" id="carouselInner">
            <!-- 复制最后一张图到开头，用于无限循环 -->
            <img src="image5.jpg" alt="">
            <img src="image1.jpg" alt="">
            <img src="image2.jpg" alt="">
            <img src="image3.jpg" alt="">
            <img src="image4.jpg" alt="">
            <img src="image5.jpg" alt="">
            <!-- 复制第一张图到结尾，用于无限循环 -->
            <img src="image1.jpg" alt="">
        </div>
    </div>

    <script>
        // 这里放JS代码
    </script>
</body>
</html>

为什么要复制首尾图片？因为要实现无缝循环：当滚动到最后一张原图时，看起来能继续滚到第一张，其实是先滚动到复制的第一张，然后瞬间把容器拉回真实第一张的位置，用户完全察觉不到。

第二步：编写原生JS逻辑 #

把下面的代码放到<script>标签里，就能实现自动无限滚动了：

const carouselInner = document.getElementById('carouselInner');
const slideWidth = document.querySelector('.carousel-inner img').offsetWidth;
let currentPosition = -slideWidth; // 初始位置定位到真实第一张图（跳过开头复制的最后一张）
let scrollInterval;

// 初始化位置
carouselInner.style.transform = `translateX(${currentPosition}px)`;

// 滚动到下一张的函数
function scrollToNextSlide() {
    currentPosition -= slideWidth;
    carouselInner.style.transform = `translateX(${currentPosition}px)`;

    // 当滚动到结尾复制的第一张图时，瞬间重置位置到真实第一张
    if (currentPosition <= -(slideWidth * 6)) {
        carouselInner.style.transition = 'none'; // 取消过渡，瞬间跳转
        currentPosition = -slideWidth;
        carouselInner.style.transform = `translateX(${currentPosition}px)`;
        // 重新开启过渡，保证下一次滚动平滑
        setTimeout(() => {
            carouselInner.style.transition = 'transform 0.5s ease-out';
        }, 50);
    }
}

// 自动滚动（每3秒切换一次）
function startAutoScroll() {
    scrollInterval = setInterval(scrollToNextSlide, 3000);
}

// 鼠标悬停时暂停滚动，离开继续
carouselInner.parentElement.addEventListener('mouseenter', () => {
    clearInterval(scrollInterval);
});
carouselInner.parentElement.addEventListener('mouseleave', startAutoScroll);

// 启动自动滚动
startAutoScroll();

代码解释 #

• 初始位置：因为我们在开头复制了最后一张图，所以初始位置要向左偏移一个图片宽度，让真实第一张图显示出来。
• 无缝循环逻辑：当滚动到结尾的复制图时，瞬间把容器拉回真实第一张的位置，同时取消过渡动画，用户看不到跳转的过程，看起来就是无限循环。
• 自动滚动+暂停：用setInterval实现自动切换，鼠标悬停时清除定时器暂停，离开后重新启动，提升用户体验。

这样你就能得到一个和Bootstrap Carousel类似的无限横向滚动效果了，纯原生JS实现，没有依赖！

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