0

我目前正在尝试组合两个 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);

关于如何在无需重新启动插件的情况下调用函数的任何想法?

注意:我无法分享该网站的链接,它仍在开发中,客户需要保持匿名。给你看一个活生生的例子会更好。

4

1 回答 1

0

我不确定 JavaScript 代码中发生了什么,但如果您希望一个脚本依赖于另一个脚本,请将其添加为 wp_register_script() 函数中的依赖项

于 2012-04-19T06:58:14.557 回答