JavaScript旋转木马的多个实例

因此，我编写了以下代码，使用

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');

});

这很好用。但我想这样做，我可以在页面上有多个旋转木马，再次工作。。。但是容器的总宽度是不正确的，因为它将两个转盘的宽度合并在一起

---

我如何运行这样的多个实例，但代码知道它与哪个实例交互，这样事情就不会混淆，等等。

我会尝试将它转换为一个函数，您可以像类一样使用它。然后可以为旋转木马创建单独的对象

因此，您将有如下内容：

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中使用类的好文章。问题是您的设计并不真正适合多个实例，因为对象文字具有旋转木马的属性，而且还具有构建方法

如果我是从头开始的话，我更喜欢一个面向对象的设计，带有一个可以实例化的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容器

类的元素都将成为独立的旋转木马

$(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();

---

进入jQuery插件有多容易？@Cameron在答案中添加了jQuery插件转换。