我有一个jQuery幻灯片插件我正在制作尽管它里面有一个setInterval()
但是如果我将setInterval()
的内容移到它之外就没有被调用然后它工作了它只运行一次。
var gap = 3;
var duration = 0.5;
(function ($) {
$.fn.slideshow = function () {
return this.each(function () {
g = gap * 1000;
d = duration * 1000;
$(this).children().css({
'position': 'absolute',
'display': 'none'
});
$(this).children().eq(0).css({
'display': 'block'
});
setInterval(function () {
slide();
}, g);
function slide() {
$(this)
.children()
.eq(0)
.fadeOut(d)
.next()
.fadeIn()
.end()
.appendTo($(this).children().eq(0).parent());
}
});
};
})(jQuery);
$('.slideshow').slideshow();
HTML:
<div class='slideshow'>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
这是我的插件的小提琴:
答案 0 :(得分:4)
this
函数中的slider
问题并未指向您认为指向的对象。
setInterval($.proxy(function () {
slide.call(this);
}, this), g);
演示:Fiddle
或更好
setInterval($.proxy(slide, this), g);
演示:Fiddle
答案 1 :(得分:1)
您的问题是this
始终是本地定义的;当您进入setInterval()
时,您丢失了原始this
(它已重置为window
对象。)
有几种方法可以解决这个问题;最简单的可能是将this
复制到局部变量中。
http://jsfiddle.net/mblase75/GrtLC/5/
var gap = 3;
var duration = 0.5;
(function ($) {
$.fn.slideshow = function () {
return this.each(function () {
g = gap * 1000;
d = duration * 1000;
$this = $(this); // caches the jQuery object as a further optimization
$this.children().css({
'position': 'absolute',
'display': 'none'
});
$this.children().eq(0).css({
'display': 'block'
});
setInterval(function () {
slide($this); // pass $this into the function
}, g);
function slide($obj) {
$obj.children()
.eq(0)
.fadeOut(d)
.next()
.fadeIn()
.end()
.appendTo($obj.children().eq(0).parent());
}
});
};
})(jQuery);
$('.slideshow').slideshow();
答案 2 :(得分:0)
您的代码无法正常工作,因为您的回调不受此限制;尝试改为
var that = this;
setInterval(function () {
slide();
}, g);
function slide() {
$(that) ....
答案 3 :(得分:0)
this
函数内的 slide
不是幻灯片。我让它在each
循环中缓存对象:http://jsfiddle.net/x7Jk8/