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

Question

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

我解释得不是很好，所以我做了一个图表：

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

Answer 1

扩展我上面推荐使用 Slick jQuery 插件的评论（http://kenwheeler.github.io/slick/) I've created a fiddle for you. http://jsfiddle.net/4ydy7ooz/

$('.multiple-items').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
});

上面的代码因此链接了 fiddle。

Answer 2

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

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

或者，如果您向每张图片添加 class，您可以执行以下操作：

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

然后设置一个间隔：

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

Answer 3

这是我提出的一个相当简单的概念证明。它有点不稳定（涉及很多关于滚动数字的猜测），但它应该是你正在寻找的，它不需要任何插件或额外的库。

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，该 existing infinite scroller 仅使用 CSS 使用 animation 和keyframes 属性。就像我之前在 jQuery 中的示例一样，需要进行一些微调才能使其看起来完全正确，但最终会得到回报。

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

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

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

How to create a looping image scroller effect

jquery

css-animations

jquery-animate