Question

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

关于如何调用函数而不必重新启动插件的任何想法？

注意：我无法共享该网站的链接，它仍在开发中，客户端需要保持无名。向你展示一个现实的例子会更好。

Answer 1

我不确定JavaScript代码中发生了什么，但如果您希望一个脚本依赖另一个脚本，请将其作为依赖项添加到wp_register_script（）函数中

在插件中调用函数。 Wordpress风格

1 个答案: