可自定义速度的js图片无缝滚动示例分享

下面是一个使用JavaScript实现的可自定义速度的图片无缝滚动示例。这个示例假设你已经有一组图片，并且希望它们能够在一个容器中无缝滚动。

HTML 部分（设置容器和图片列表）:

<div id="scrollContainer" style="overflow: hidden; width: 500px; height: 300px; position: relative;">
    <div id="scrollImages" style="position: absolute; white-space: nowrap;">
        <img src="image1.jpg" alt="Image 1" style="height: 300px; vertical-align: top;">
        <img src="image2.jpg" alt="Image 2" style="height: 300px; vertical-align: top;">
        <img src="image3.jpg" alt="Image 3" style="height: 300px; vertical-align: top;">
        <!-- 重复第一张图片以实现无缝滚动 -->
        <img src="image1.jpg" alt="Image 1" style="height: 300px; visibility: hidden; vertical-align: top;">
    </div>
</div>
<button id="speedControl">调整速度</button>

JavaScript 部分（实现滚动和速度控制）:

let scrollSpeed = 2; // 初始速度，单位像素/毫秒
let scrollPosition = 0;

function scrollImages() {
    scrollPosition -= scrollSpeed;
    document.getElementById('scrollImages').style.transform = `translateX(${scrollPosition}px)`;

    // 检查是否到达最后一张图片的末尾（通过隐藏的第一张图片检测）
    if (scrollPosition <= -document.getElementById('scrollImages').firstElementChild.offsetWidth) {
        scrollPosition = 0; // 重置滚动位置
    }

    requestAnimationFrame(scrollImages); // 循环调用
}

scrollImages(); // 开始滚动

document.getElementById('speedControl').addEventListener('click', function() {
    // 这里简单地通过改变速度值来模拟速度调整
    scrollSpeed = scrollSpeed === 2 ? 1 : 2; // 切换速度
    console.log('滚动速度已更新为：', scrollSpeed, '像素/毫秒');
});

注意：

1. 容器 `#scrollContainer` 设置了 `overflow: hidden` 以隐藏超出部分的内容。

2. 图片列表 `#scrollImages` 被设置为 `position: absolute`，并通过 `translateX` 进行水平移动以实现滚动效果。

3. 为了实现无缝滚动，我在图片列表的末尾重复了第一张图片，但设置为 `visibility: hidden`，以便在滚动过程中不会显示出来。

4. 使用 `requestAnimationFrame` 来循环调用 `scrollImages` 函数，实现平滑滚动。

5. 通过点击按钮 `#speedControl` 来调整滚动速度。这里只是简单地切换了两个速度值，你可以根据需要调整这个逻辑。

请确保在实际使用时，根据你的具体需求调整图片路径、容器尺寸、滚动速度等参数。