我有以下问题：我正在创建一个简单的插件 jquery carousel，用于为框中的图像设置动画。但是我遇到了以下问题，使用OO来构建插件，我使用它来引用我的对象。
但是其中一个函数使用了 jquery 的 animate 方法。我想以递归的方式做到这一点。因为动画是一个常数。但是在回调函数jquery animate中，this指的是对象动画，而不是我在插件本身执行时创建的对象。如何在动画中调用函数回调对象？我尝试在动画行代码之前直接调用函数 run()，但出现错误：Uncaught RangeError: Maximum call stack size exceeded
如果我将运行函数放在动画回调中，我会收到其他错误：
this.wraper.animate(
{top : '-='+image_height},
this.config.speed,
this.run()
)
或者
this.wraper.animate(
{top : '-='+image_height},
this.config.speed,
function(){
this.run();
}
)
因为这是对 this.wraper 对象的引用，而不是对函数对象的引用似乎有点难以解释。
这是代码：
(function($){
carouselClass = function (el, opts) {
this.id = $(el).attr("id");
this.i = 0;
this.config = opts;
this.wraper;
this.count = 0;
this.flag = true;
this.init = function() {
// variables
var img = $("#"+this.id).find("img");
this.count = img.length;
//adiciona css necessário a div wrapper
$("#"+this.id).css("position","relative");
$("#"+this.id).css("overflow","hidden");
$("#"+this.id).append("<div></div>");
this.wraper = $("#"+this.id).find("div");
//definições css da div wrapper
this.wraper.css("position","absolute");
this.wraper.css("right","0px");
var direction = this.config.direction;
var container = this.wraper;
//adiciona as imagens ao novo container
img.each(function(){
if(direction == "left" || direction == "right")
$(this).css("float", direction)
$(this).css("display", "block");
container.append($(this));
});
//seta a largura e altura do wraper conforme a direção
if(direction == "left" || direction == "right")
{
this.wraper.width((img.width()*this.count));
this.wraper.height(img.height());
}
else
{
this.wraper.height((img.height()*this.count));
this.wraper.width(img.width());
}
this.run();
}
this.run = function()
{
if(this.config.direction == "top")
{
height = this.wraper.height();
image_height = height/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{top : '-='+image_height},
this.config.speed
)
}
this.wraper.animate(
{top:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
if(this.config.direction == "bottom")
{
height = this.wraper.height();
image_height = height/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{bottom : '-='+image_height},
this.config.speed
)
}
this.wraper.animate(
{bottom:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
if(this.config.direction == "left")
{
width = this.wraper.width();
image_width = width/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{left : '-='+image_width},
this.config.speed
)
}
this.wraper.animate(
{left:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
if(this.config.direction == "right")
{
width = this.wraper.width();
image_width = width/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{right : '-='+image_width},
this.config.speed
)
}
this.wraper.animate(
{right:'0px'},
this.config.speed
);
//my problem is this call to function recursive
this.run();
}
}
};
$.fn.carousel = function(options)
{
var opts = $.extend({}, $.fn.carousel.defaults, options);
return this.each(function () {
var instance = new carouselClass($(this), opts);
/**********Start the carousel ***********/
instance.init();
});
$.fn.carousel.defaults = {
'direction': "left",
'speed': 3000
};
}
})(jQuery);
如果我以这种方式调用，插件工作，但只有我设置为 i var 的次数，我希望轮播不断变化：
this.prepare = function()
{
this.i++;
if(this.i < 3)
{
this.run();
}
}
this.run = function()
{
if(this.config.direction == "top")
{
height = this.wraper.height();
image_height = height/this.count;
for(j = 0; j < (this.count-1); j++)
{
this.wraper.animate(
{top : '-='+image_height},
this.config.speed
)
}
this.wraper.animate(
{top:'0px'},
this.config.speed
);
this.prepare();
}
}