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

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让动画变得非常流畅，因此我发现并修改了使用animation和keyframes属性仅使用CSS创建的existing infinite scroller。就像我之前在jQuery中的例子一样，它需要一些微调才能让它看起来完全正确，但它最终会得到回报。

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

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

Answer 2

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

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

Answer 3

扩展我的评论，建议使用Slick jQuery插件（http://kenwheeler.github.io/slick/），我为你创建了一个小提琴。 http://jsfiddle.net/4ydy7ooz/

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

上面的代码所以小提琴是联系在一起的。