Question

我正在学习javascript和jquery，我试图创建自己的旋转木马。我偶然发现的当前问题如下。当用户停止在旋转木马中滚动时，我有一个运行的功能，并将我的目标Carousel项目居中到我想要的位置。我在小提琴中用黑线说明了这一点。以下是我的功能：

    jQuery.fn.CenterToPoint = function(){
    return this.each(function(){

        Offset = $(this).offset().left;
        Width = $(this).width();
        Illuminate_Point = 0.45 * $(window).width();
        ScrollLeft = Illuminate_Point - (Offset+Width/2); 

        $Container.animate({scrollLeft: "-=" + ScrollLeft},450);
        }); 
}

但是，即使动画正在运行，我希望用户能够滚动。如何在运行时杀死此动画，但用户点击，mousescroll或trackpad在我的旋转木马上使用？这是我的jFiddle： http://jsfiddle.net/ptp05jvo/

Answer 1

根据我的理解，您的问题是：

盒子在到达所需点（黑线）后抽搐。
当动画（框移向黑线）时，用户输入将导致框跳转＃39;。在这种情况下，您希望用户输入覆盖动画滚动。

我没有解决整个问题，但到目前为止我所得到的是：http://jsfiddle.net/ptp05jvo/3/

我设法通过在.animate()中添加以下选项来停止第一个问题（抽搐）。

always: function() {
    clearTimeout($Container.data('scrollTimeout'));
    isSystemScroll = false;
}

当您使用.animate()进行动画滚动时，jQuery会滚动元素，并将其视为实际滚动，因此会触发.scroll()事件。这可能是好的/坏的。在你的旋转木马的情况下，它有点不好，因为你在.CenterToPoint()事件中调用了.scroll()，这意味着每当jQuery将框设置为动画时，它就会被调用。这就是造成抽搐问题的原因。 {。{1}}一直在`.scroll（）＆＃39;内被调用。事件。因此，我添加的选项将停止此操作。

为了区分问题，我添加了新的jQuery函数.CenterToPoint()来处理滚动停止事件。

我还在代码中引入了一个名为scrollStopped的新变量。想法是识别滚动是否来自用户/动画。有了这个，我们可以优先使用用户输入来覆盖动画滚动。但是，用户输入可以是任何东西，键盘箭头，鼠标滚轮滚动，鼠标单击滚动条等。在我的示例中，我只处理键盘箭头输入，如下面的代码所示：

isSystemScroll

显然，您可以添加额外的检查以仅捕获左/右箭头键而不是所有键。

这种解决了第二个问题。但是你仍然需要处理其他用户输入，特别是鼠标移动滚动条。

从测试中，我发现Firefox渲染动画效果更好，更流畅。在Firefox中，带键盘箭头的用户输入将完美覆盖动画。两者之间的过渡是平稳的。但是，在Chrome中，有一点滞后/跳跃。此外，在Chrome中，水平滚动条不会显示在Firefox中，它会显示。

值得一提的是，Firefox并没有显示抽搐问题。我无法确定这是否是由您拥有的CSS引起的。我没有修改你的CSS。

我遇到了几个轮播库，并做了同样的测试，看看他们是如何处理这个问题的。

猫头鹰轮播

http://owlgraphic.com/owlcarousel/demos/custom.html

仅允许拖动输入。禁用其他用户输入（滚动条，键盘箭头等）。但是，如果您尝试在动画播放时拖动轮播（在Chrome浏览器中），您将看到相同的跳转/延迟问题。同样，Firefox使用此库显示更好，更流畅的动画。

<强>油滑

http://kenwheeler.github.io/slick/

＆＃39;自动播放＆＃39;选项可防止用户在旋转木马动画时输入。没有滚动条，您只能使用键盘箭头移动。

<强>结论

作为这个长期答案的结论，如果你想建立自己的旋转木马，你可以做的事情很少：

限制用户输入，仅允许某些输入。
禁用滚动条。

或者，您可以使用现有的库。

停止jquery动画。建立一个旋转木马

1 个答案: