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

【问题标题】：How to create a looping image scroller effect如何创建循环图像滚动效果
【发布时间】：2015-04-18 00:39:37
【问题描述】：

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

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

任何帮助将不胜感激。

【问题讨论】：

我强烈推荐使用如下的 jQuery 插件：kenwheeler.github.io/slick/#demos - 我之所以这么说是因为你提到了 jQuery。光滑的滑块很容易实现，并且完全符合您的要求。
顺便说一句，猫的真棒照片

标签： jquery jquery-animate css-animations

【解决方案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/

【讨论】：

正是我想要的，谢谢。有什么办法可以平滑无限的scrollLeft？我已经尝试过线性缓解，但它仍然有点停止和启动jsfiddle.net/L8L4e2eg/2
@bengem 我找到了一个代码示例，它或多或少地完成了您使用 CSS 实现的目标。我对其进行了一些修改，以使其看起来与 jQuery 示例相同（但滚动完全平滑）。我通过快速说明、代码示例和指向新 JSFiddle 的链接更新了我的答案。希望这有帮助！

【解决方案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);

【讨论】：

【解决方案3】：

扩展我上面推荐使用 Slick jQuery 插件 (http://kenwheeler.github.io/slick/) 的评论，我为您创建了一个小提琴。 http://jsfiddle.net/4ydy7ooz/

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

上面的代码，所以小提琴是链接的。

【讨论】：

哇，移动版 Safari真的不喜欢那个插件。在您只点击演示中的“下一步”按钮一次后，所有图像都会开始轻微拉伸并持续闪烁。