jQuery使用数组编写图片无缝向左滚动

为了使用jQuery实现图片的无缝向左滚动，你可以通过结合HTML、CSS和jQuery来完成这个任务。以下是一个简单的实现步骤和代码示例：

### HTML 结构

首先，你需要一组图片，并将它们放置在一个容器内。

<div id="slider" class="slider">
    <div class="slider-inner">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <!-- 可以根据需要添加更多图片 -->
    </div>
</div>

### CSS 样式

然后，添加一些CSS来设置图片的显示方式和容器的样式。

.slider {
    overflow: hidden;
    position: relative;
    width: 600px; /* 或你需要的宽度 */
    height: 400px; /* 或你需要的高度 */
}

.slider-inner {
    display: flex;
    width: calc(100% * 3); /* 假设你有三张图片，总宽度是容器宽度的三倍 */
    transition: transform 0.5s ease; /* 平滑滚动效果 */
}

.slider img {
    width: 100%; /* 使得图片宽度充满容器 */
    flex-shrink: 0; /* 防止图片被压缩 */
}

### jQuery 滚动逻辑

最后，使用jQuery来添加滚动效果。我们将使用`setInterval`来周期性地移动图片。

$(document).ready(function() {
    var sliderWidth = $('.slider').width();
    var moveInterval = setInterval(function() {
        var inner = $('.slider-inner');
        var leftPos = inner.css('transform').match(/(-?\d+)/)[1];
        leftPos = parseInt(leftPos, 10);

        // 计算新的位置
        var newLeftPos = leftPos - sliderWidth;

        // 检查是否到达最左边，并重置位置以实现无缝滚动
        if (newLeftPos <= -sliderWidth * 2) { // 假设有三张图片
            inner.css('transform', 'translateX(0px)');
        } else {
            inner.css('transform', 'translateX(' + newLeftPos + 'px)');
        }
    }, 2000); // 每2秒滚动一次
});

**注意**：

1. 上面的CSS和jQuery代码中，我假设你有三张图片，并且容器每次滚动一张图片的宽度。

2. 如果你的图片数量不同，或者想要调整滚动速度，你需要相应地调整CSS中的`calc(100% * 图片数量)`和jQuery中的滚动间隔以及`if`条件判断中的值。

3. `transform`属性的获取和解析可能因jQuery版本和浏览器兼容性而异，这里使用的是一种基本的正则表达式匹配方法。

4. 你可以通过调整`transition`属性的值和`setInterval`的延迟时间来控制滚动效果的平滑度和速度。