Hammer.js 轮播开始窗格

Question

嘿嘿，

我正在我的大学从事一个项目，我想使用“Hammer.js”。 我已经下载了 Carousel-Example，它非常适合我。

但我想在我的代码的中间窗格开始，我认为这并不简单。

是这样的：

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;

到任何你想要的，轮播在初始化时总是从那个窗格开始！简单！