我目前正在尝试组合两个 wordpress 插件,而不必重写一个以适应另一个。
我最基本的问题是:如何调用存在于另一个插件之外的函数。例如。我有两个文件:
1) js/N_Rotator.js
2) js/layerSlider.js
他们两个都正常工作。第一个是在背景中旋转的图像。第二个是旋转内容(即标题、图像链接等)。
我需要做的是同步它们。当滑块 2 旋转时,我希望滑块 1 也旋转。
经过一番挖掘,我发现我可以像这样从 Slider 2 启动 Slider 1:
a('#carousel').infiniteCarousel({ anim('next'); });
但我得到一个错误,那个 anim() 没有退出。所以在滑块 1 js 中,我将它放在了一个变量中。
if(o.play) {
anim('next');
}
然后从滑块 2 中这样调用它:
a('#carousel').infiniteCarousel({ play:1 });
但所做的只是让它每次启动时都从头开始。它会滑动一次并迅速回到起点
那么,有没有办法我可以自己调用该函数?这就是 anim() 的结构。(从以前制作的名为infiniteCarousel 的插件中获取)。
function anim(direction,dist)
{
// Fade left/right arrows out when transitioning
$('#btn_rt'+randID).fadeOut(500);
$('#btn_lt'+randID).fadeOut(500);
// animate textholder out of frame
$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);
//?? Fade out play/pause?
$('#pause_btn'+randID).fadeOut(250);
$('#play_btn'+randID).fadeOut(250);
if(direction == "next")
{
if(curr==numImages) curr=0;
if(dist>1)
{
borderpatrol($('#thumb'+randID+'_'+(curr+dist)));
$('li:lt(2)', obj).clone().insertAfter($('li:last', obj));
$('ul', obj).animate({left:-imgWidth*(dist+1)},o.transitionSpeed,function(){
$('li:lt(2)', obj).remove();
for(j=1;j<=dist-2;j++)
{
$('li:first', obj).clone().insertAfter($('li:last', obj));
$('li:first', obj).remove();
}
$(this).css({'left':-imgWidth});
curr = curr+dist;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
else
{
borderpatrol($('#thumb'+randID+'_'+(curr+1)));
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
// Copy leftmost (first) li and insert it after the last li
$('li:first', obj).clone().insertAfter($('li:last', obj));
// Update width and left position of ul and animate ul to the left
$('ul', obj)
.animate({left:-imgWidth-960},o.transitionSpeed,function(){
$('li:first', obj).remove();
$('ul', obj).css('left',-imgWidth+'px');
$('#btn_rt'+randID).fadeIn(500);
$('#btn_lt'+randID).fadeIn(500);
if(autopilot) $('#pause_btn'+randID).fadeIn(250);
if(autopilot)
{
$('#progress'+randID).width(imgWidth).height(pbarHeight).fadeIn(500);
$('#progress'+randID).fadeIn(500).animate({'width':0},o.displayTime,function(){
$('#pause_btn'+randID).fadeOut(50);
setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed)
});
}
curr=curr+1;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
}
if(direction == "prev")
{
if(dist>1)
{
borderpatrol($('#thumb'+randID+'_'+(curr-dist)));
$('li:gt('+(numImages-(dist+1))+')', obj).clone().insertBefore($('li:first', obj));
$('ul', obj).css({'left':(-imgWidth*(dist+1))}).animate({left:-imgWidth},o.transitionSpeed,function(){
$('li:gt('+(numImages-1)+')', obj).remove();
curr = curr - dist;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
else
{
borderpatrol($('#thumb'+randID+'_'+(curr-1)));
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
// Copy rightmost (last) li and insert it after the first li
$('li:last', obj).clone().insertBefore($('li:first', obj));
// Update width and left position of ul and animate ul to the right
$('ul', obj)
.css('left',-imgWidth*2+'px')
.animate({left:-imgWidth},o.transitionSpeed,function(){
$('li:last', obj).remove();
$('#btn_rt'+randID).fadeIn(500);
$('#btn_lt'+randID).fadeIn(500);
if(autopilot) $('#pause_btn'+randID).fadeIn(250);
curr=curr-1;
if(curr==0) curr=numImages;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
}
}
该插件的结构如下:
(function($) {
$.fn.extend({
infiniteCarousel: function(options) {
var defaults = {
defaults...
};
var options = $.extend(defaults, options);
return this.each(function() { ...anim is inside here... } }); })(jQuery);
关于如何在无需重新启动插件的情况下调用函数的任何想法?
注意:我无法分享该网站的链接,它仍在开发中,客户需要保持匿名。给你看一个活生生的例子会更好。