JavaScript轮播的多个实例
JavaScript轮播的多个实例
提问于 2014-06-13 17:13:53
因此，我编写了以下代码，以便使用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');
});它工作得很好。但我想让它，以便我可以在页面上有多个旋转木马，这再次工作…但是容器的总宽度是不正确的，因为它结合了两个carousel的宽度。
我怎么能运行这样的东西的多个实例，但是代码知道它正在与哪个实例交互，这样事情就不会变得混乱，等等。
回答 2
Stack Overflow用户
发布于 2014-06-13 17:40:03
我会试着把它变成一个你可以像类一样使用的函数。然后，您可以为您的轮播创建单独的对象。
因此，您将拥有类似于以下内容：
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/中使用类的好文章
Stack Overflow用户
发布于 2014-06-13 18:03:41
问题是你的设计并不是真的适合多个实例，因为对象字面量不仅具有carousel的属性，而且还有build方法。
如果我从头开始，我更喜欢一种更面向对象的设计，使用一个可以实例化的旋转木马类，或者将它作为一个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类的元素都将成为一个独立的carousel。
$(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插件的转换，它可以用于多个carousel。
(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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24201731
复制相关文章
相似问题
腾讯云开发者
