Hammer.js旋转木马启动窗格

Question

Heyho

我正在大学里做一个项目，我想用"Hammer.js“。我已经下载了这个旋转木马的例子，它对我来说非常有用。

但是我想启动代码的中间窗格，我认为这并不是那么简单。

就像这样：

http://img203.imageshack.us/img203/6326/schemeas.jpg

所以Hammer.js总是从绿色屏幕开始。但我喜欢从黄色的开始。我在init函数中添加了一个右击，但是当页面加载时，它看起来很糟糕，不能成为目标^^。

我希望你们中的任何人都知道如何解决我的问题。

Answer 1

试着打

carousel.showPane(1);

它将立即显示第二个窗格。你会想把它靠近底部，就在它写的地方之后。

carousel.init();

如果您感到冒险，可以尝试让它自动从该窗格开始，因为Carousel函数中有一个名为current_pane的变量，该变量设置为默认值0(第一个窗格)。更改此操作也可能有效，但可能需要在其他地方编写更多代码。做实验！

编辑

NULL是对的，它确实使它充满活力。下面是一个更深入的方法，可以在没有动画的情况下设置它：

我发现负责更改窗格显示的方法是setContainerOffset方法，它可以传递一个变量来激活它。我之前告诉过您使用showPane(2)，但随后调用了

setContainerOffset(offset, true)

这导致了动画的发生。你应该做的是做一个稍微不同的版本的showPane.

this.setPane = function( index ) {
         // between the bounds
        index = Math.max(0, Math.min(index, pane_count-1));
        current_pane = index;

        var offset = -((100/pane_count)*current_pane);
        setContainerOffset(offset, false);
    };

您会发现它与showPane几乎完全相同，除了名称和使用动画调用setContainerOffset : false之外。这将立即显示您选择的窗格，并且可以使用

carousel.setPane(index);

我所做的是将它添加到init函数中，这样看起来如下所示：

 this.init = function() {
        setPaneDimensions();
        var c = this;
        $(window).on("load resize orientationchange", function() {
            setPaneDimensions();
            c.setPane(current_pane);
            //updateOffset();
        })
    };

现在你可以改变

var current_pane = 0;

无论你想要什么，旋转木马在初始化时总是从那个窗格开始！很简单！