Question

所以我使用Hammer.js和jQuery编写了以下用JavaScript构建轮播的代码：

var hCarousel = {

    container: false,
    panes: false,
    pane_width: 0,
    pane_count: 0,
    current_pane: 0,

    build: function( element ) {

        hCarousel.container = $(element).find('.hcarousel-inner-container');

        hCarousel.panes = $(hCarousel.container).find('> .section');

        hCarousel.pane_width = 0;
        hCarousel.pane_count = hCarousel.panes.length;

        hCarousel.current_pane = 0;

        hCarousel.setPaneDimensions( element );

        $(window).on('load resize orientationchange', function() {

            hCarousel.setPaneDimensions( element );

        });

        $(element).hammer({ drag_lock_to_axis: true })
                    .on('release dragleft dragright swipeleft swiperight', hCarousel.handleHammer);

    },

    setPaneDimensions: function( element ){

        hCarousel.pane_width = $(element).width();

        hCarousel.panes.each(function() {
            $(this).width(hCarousel.pane_width);
        });

        hCarousel.container.width(hCarousel.pane_width*hCarousel.pane_count);

    },

    next: function() {

        return hCarousel.showPane(hCarousel.current_pane+1, true);

    },

    prev: function() {

        return hCarousel.showPane(hCarousel.current_pane-1, true);

    },

    showPane: function( index ) {

        // between the bounds
        index = Math.max(0, Math.min(index, hCarousel.pane_count-1));
        hCarousel.current_pane = index;

        var offset = -((100/hCarousel.pane_count)*hCarousel.current_pane);

        hCarousel.setContainerOffset(offset, true);

    },

    setContainerOffset: function( percent, animate ) {

        hCarousel.container.removeClass("animate");

        if(animate) {
            hCarousel.container.addClass("animate");
        }

        if(Modernizr.csstransforms3d) {
            hCarousel.container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
        }
        else if(Modernizr.csstransforms) {
            hCarousel.container.css("transform", "translate("+ percent +"%,0)");
        }
        else {
            var px = ((hCarousel.pane_width*hCarousel.pane_count) / 100) * percent;
            hCarousel.container.css("left", px+"px");
        }

    },

    handleHammer: function( ev ) {

        ev.gesture.preventDefault();

        switch(ev.type) {

            case 'dragright':
            case 'dragleft':
                // stick to the finger
                var pane_offset = -(100/hCarousel.pane_count)*hCarousel.current_pane;
                var drag_offset = ((100/hCarousel.pane_width)*ev.gesture.deltaX) / hCarousel.pane_count;

                // slow down at the first and last pane
                if((hCarousel.current_pane == 0 && ev.gesture.direction == Hammer.DIRECTION_RIGHT) ||
                    (hCarousel.current_pane == hCarousel.pane_count-1 && ev.gesture.direction == Hammer.DIRECTION_LEFT)) {
                    drag_offset *= .4;
                }

                hCarousel.setContainerOffset(drag_offset + pane_offset);

                break;

            case 'swipeleft':
                hCarousel.next();
                ev.gesture.stopDetect();
                break;

            case 'swiperight':
                hCarousel.prev();
                ev.gesture.stopDetect();
                break;

            case 'release':
                // more then 50% moved, navigate
                if(Math.abs(ev.gesture.deltaX) > hCarousel.pane_width/2) {
                    if(ev.gesture.direction == 'right') {
                        hCarousel.prev();
                    } else {
                        hCarousel.next();
                    }
                }
                else {
                    hCarousel.showPane(hCarousel.current_pane, true);
                }
                break;
        }

    }

}

我称之为：

var hSections;

$(document).ready(function(){

    hSections = hCarousel.build('.hcarousel-container');

});

哪个工作正常。但我想这样做，以便我可以在页面上有多个旋转木马再次起作用......但是容器的整体宽度是不正确的，因为它结合了两个旋转木马的宽度。

我怎样才能运行这样的多个实例，但是代码知道它正在与之交互的WHICH实例，所以事情不会混淆等等。

Answer 1

我会尝试把它变成一个你可以像课一样使用的功能。然后，您可以为旋转木马创建单独的对象。

所以你会得到以下内容：

function HCarousel (element) {
    this.element=element;
    this.container= false;
    this.panes= false;
    this.pane_width= 0;
    this.pane_count= 0;
    this.current_pane= 0;
}

然后像这样在类上添加每个方法。

HCarousel.prototype.build = function() {
    this.container = $(element).find('.hcarousel-inner-container');
    this.panes = $(hCarousel.container).find('> .section');
    this.pane_width = 0;
    this.pane_count = hCarousel.panes.length;
    this.current_pane = 0;
    this.setPaneDimensions( element );
    $(window).on('load resize orientationchange', function() {
        this.setPaneDimensions( element );
    });
    $(this.element).hammer({ drag_lock_to_axis: true }).on('release dragleft dragright swipeleft swiperight', hCarousel.handleHammer);
};

等。这应该给你基本的想法。会稍微重写一下，但是你可以用这样的东西创建一个旋转木马：

var carousel1 = new HCarousel('.hcarousel-container');

希望能让你走上正轨。

JS中实际上并不存在类，但这是一种使用函数模拟一个类的方法。这是一篇关于在JS http://www.phpied.com/3-ways-to-define-a-javascript-class/

中使用类的好文章

Answer 2

问题是你的设计并不适合多个实例，因为对象文字具有轮播的属性，而且还有构建方法。

如果我是从头开始，我更喜欢更多的OOP设计，可以实例化的carousel类，或者将它作为jQuery插件。也就是说，调整现有代码并非不可能。

function hCarousel(selector){
  function hCarouselInstance(element){
    var hCarousel = {

        // insert whole hCarousel object code
        container: false,
        panes: false,
        build : function( element ){
        ...

    };

    this.hCarousel = hCarousel;
    hCarousel.build(element);
  }

  var instances = [];
  $(selector).each(function(){
    instances.push(new hCarouselInstance(this));
  });

  return instances;
}

用法

例如，具有hcarousel-container类的所有元素都将成为独立的轮播。

$(document).ready(function(){
    var instances = hCarousel('.hcarousel-container');
});

说明：

调用hCarousel函数传递选择器，它可以匹配多个元素。如果需要，也可以多次调用它。

内部hCarouselInstance将像一个类一样使用，并使用new关键字进行实例化。调用hCarousel时，它会迭代匹配的元素并创建一个新的hCarouselInstance实例。现在，hCarouselInstance是一个包含原始hCarousel对象的自包含函数，在创建对象后调用hCarousel.build()。

instances返回值是包含每个实例对象的数组。您可以从那里访问hCarousel属性和方法，例如：

instances[0].hCarousel.panes;

jQuery插件

下面是一个jQuery插件的转换，它适用于多个轮播。

(function ( $ ) {
    $.fn.hCarousel = function( ) {
        return this.each(function( ) {

            var hCarousel = {
                // insert whole hCarousel object code here - same as in the question
            };

            hCarousel.build(this);

        });
    };
}( jQuery ));

插件使用：

$('.hcarousel-container').hCarousel();

JavaScript轮播的多个实例

2 个答案:

用法

说明：

jQuery插件