Hammer.js輪播啟動窗格

Question

嘿嘿

我正在大學里從事一個項目，我想使用“ 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幾乎相同，除了名稱和它使用animation：false調用setContainerOffset的事實。 這將立即顯示您選擇的窗格，可以使用

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;

隨心所欲，輪播會在初始化時始終從該窗格開始！ 簡單！