javascript - Hammer.js 轮播开始 Pane

Question

嘿嘿，

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

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

是这样的:

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

所以 Hammer.js 启动时总是显示绿屏。但我喜欢从黄色开始。我在 init 函数中添加了一次向右滑动，但是当页面加载时它看起来很糟糕，并且不可能是目标 ^^

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

Answer 1

尝试打电话

carousel.showPane(1);

这将立即显示第二个 Pane 。您需要将其放在底部附近，就在它所说的位置之后。

carousel.init();

如果您喜欢冒险，您可以尝试让它自动从该 Pane 开始，因为 Carousel 函数中有一个名为 current_pane 的变量，该变量设置为默认值 0(第一个 Pane )。改变它也可能有效，但可能需要在其他地方添加更多代码。实验!

编辑

NULL 是对的，它确实使它具有动画效果。这是一种更深入的方法来设置它而不使用动画:

我发现负责更改显示哪个 Pane 的方法是 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 几乎相同，除了名称以及它使用动画: false 调用 setContainerOffset 的事实之外。这将立即显示您选择的 Pane ，并且可以使用

调用

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;

无论你想要什么，轮播都会在初始化时从该 Pane 开始!简单!