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

Question

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

我解释得不太清楚，所以我做了一个图表:

如有任何帮助，我们将不胜感激。

Answer 1

这是我提出的一个相当简单的概念证明。它有点不稳定(涉及对滚动数字的大量猜测)，但它应该是您正在寻找的，并且不需要任何插件或额外的库。

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();
    });
}

http://jsfiddle.net/IronFlare/L8L4e2eg/

<小时/>

编辑:

我无法使用 jQuery 使动画完全流畅，所以我找到并修改了 existing infinite scroller使用 animation 和 keyframes 属性仅使用 CSS 创建。就像我之前在 jQuery 中的示例一样，它需要一些微调才能使其看起来完全正确，但最终会得到返回。

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

http://jsfiddle.net/IronFlare/hrcekoha/3/