Jquery 如何创建循环图像滚动效果

我正在尝试使用jQuery为循环图像滚动开发一个客户端解决方案。中间的div包含4个图像，这些图像将向右移动。当最右边的图像离开页面时，它将添加到div的开头，以便再次滚动

我解释得不太清楚，所以我画了一张图表：

---

任何帮助都将不胜感激

我在上面的评论中进一步建议使用光滑的jQuery插件（），我已经为您创建了一个提琴

---

上面的代码可以链接小提琴。

我以前做过。最简单的方法是：

var nextImage = function() {
    $('#container').children().last().insertBefore(
        $('#container').children().first();
    )
}

或者，如果向每个图像添加一个类，则可以执行以下操作：

var nextImage = function() {
    $('img.slider:last').insertBefore($('img.slider:first'));
}

然后设置一个间隔：

window.sliderInterval = setInterval(function(){ nextImage(); }, 500);

---

这是我提出的一个相当简单的概念证明。它有点不稳定（涉及到对卷轴编号的大量猜测），但它应该是您正在寻找的，并且不需要任何插件或附加库

function scroller () {
    padding = 5;
    border = 1;
    $(".item").first().insertAfter($(".item").last());
    $(".gallery").animate({scrollLeft: $(".item").first().outerWidth() + padding + border, easing: 'swing'}, 1200, function(){
        $(".gallery").scrollLeft(1);
        scroller();
    });
}

---

编辑：

我无法使用jQuery使动画完全平滑，因此我使用

动画

和

关键帧

属性找到并修改了仅使用CSS创建的动画。就像我在jQuery中的前一个示例一样，它需要一些微调，以使它看起来完全正确，但最终会得到回报

@-webkit-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -635px; }
}

---

我强烈建议您使用如下jQuery插件：-我之所以这样说，是因为您提到了jQuery。光滑的滑块很容易实现，并且完全按照你的要求来做。作为catsWow的一个旁白，MobileSafari真的不喜欢这个插件。在你只点击演示中的“下一步”按钮一次后，所有的图像都开始轻微拉伸并持续闪烁。这正是我想要的，谢谢。有什么办法可以使左边的卷轴平滑吗？我尝试了一种线性的简化方法，但是在@bengem中仍然有点停下来就开始了。我发现了一个代码示例，它或多或少地实现了您使用CSS所需要的功能。我对其进行了一些修改，使其看起来与jQuery示例相同（但具有完全平滑的滚动）。我用一个快速描述、代码示例和指向新JSFIDLE的链接更新了我的答案。希望这是有帮助的！

@-webkit-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -635px; }
}