js轮播图无缝滚动动画

// 示例代码：使用requestAnimationFrame优化动画
function animate() {
    // 更新轮播图位置
    requestAnimationFrame(animate);
}
animate();

<!-- 示例代码：HTML结构 -->
<div class="carousel">
    <div class="carousel-inner">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <!-- 复制的第一项 -->
        <div>内容1</div>
    </div>
</div>

// 示例代码：JavaScript控制无缝滚动
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-inner div');
const totalItems = items.length - 1; // 减去复制的那项

function scrollCarousel() {
    // 滚动逻辑...
    if (currentIndex === totalItems) {
        // 到达复制项时，瞬间跳回首项
        setTimeout(() => {
            currentIndex = 0;
            // 更新DOM位置
        }, 500); // 与动画时间一致
    }
}

// 示例代码：启动和停止定时器
let timer = setInterval(scrollCarousel, 3000); // 每3秒滚动一次

// 在需要的时候停止定时器
function stopCarousel() {
    clearInterval(timer);
}