原生js 轮播图平划

### 使用原生 JavaScript 实现平滑过渡的轮播图

为了创建一个具有平滑滚动效果的图片轮播组件，可以按照如下方法构建：

#### HTML 结构设计
HTML 部分定义了一个容器用于容纳所有的图片项。这些项目被放置在一个可水平滚动的 `div` 中。

<div class="carousel-container">
    <ul id="carousel" style="display: flex; overflow-x: scroll;">
        <li><img src="image1.jpg"/></li>
        <li><img src="image2.jpg"/></li>
        <!-- 更多图像 -->
    </ul>
</div>

#### CSS 基本样式设定
CSS 设置确保了列表项能够并排显示，并允许用户通过拖动来查看超出视口宽度的内容[^1]。

.carousel-container {
    width: 80%;
    margin: auto;
}

#carousel li {
    list-style-type: none;
    padding-right: 1rem;
}

#### 添加交互逻辑
利用 JavaScript 来控制自动播放和平滑滚动行为。这里的关键在于使用 `requestAnimationFrame()` 函数配合定时器来进行动画帧更新，从而达到流畅的效果。

const carousel = document.getElementById('carousel');
let currentIndex = 0;

function animateScroll() {
    const itemWidth = carousel.offsetWidth / 4; // 计算单个项目宽度
    let nextIndex = (currentIndex + 1) % carousel.children.length;
    
    function step(timestamp) {
        if (!startTimestamp) startTimestamp = timestamp;
        
        const progress = Math.min((timestamp - startTimestamp) * speedFactor, itemWidth);
        carousel.scrollLeft += progress;
        
        if(progress >= itemWidth){
            currentIndex = nextIndex;
            return;
        }
        
        requestAnimationFrame(step);
    }

    let startTimestamp = null;
    const speedFactor = 0.05; // 控制速度因子
    
    requestAnimationFrame(step);
}

// 自动切换到下一张幻灯片
setInterval(() => {animateScroll()}, 3000); // 每隔三秒触发一次

此代码片段实现了基于时间戳计算偏移量的方式，在每次调用时逐步增加 `scrollLeft` 属性值直到完成整个项目的位移距离为止。这种方式不仅可以让滚动更加自然连贯，而且还能兼容大多数现代浏览器。