Question

所以我对插件开发很陌生，我一直在研究图像轮播，并希望将其变成插件。我以为我已经想通了，但似乎无法做到正确。 init函数不会调用。这是我的插件代码：

// Plugin
(function( $ ){

  $.fn.customSlider = function(options){

    var config = $.extend({ // TODO: add all configuration options needed
      'slideCount': null,
      'delayTime': 1000
    }, options);

    var slideCount  = this.find('div.slide').length,
        rotate      = function(i){ // TODO: make name more descriptive
            setInterval(function() {
                if (i < slideCount -1) {
                    i++;
                } else {
                    i=0;
                }
                slideRotate(i);
            },  delayTime);
        }, 

        slideRotate = function(i){
            var asdf = null;
            $('.slider').children().fadeOut(500);
            $($('.slider div').get(i)).fadeIn(500); // TODO: externalize $('.slider div').get(i) into variable
        },

        gotoSlide = function(i){
            customSlider.rotate(i-1);
        },

        init = function(){
            console.log('init');
            this.find('div:first').show();
            customSlider.rotate(0);
        }, 

        clickzor = function() { // TODO: make selector more specific  
            clearInterval(intervalID); 
            intervalID = null; 
            var num = parseInt($(this).text(),'') - 1; 
            slideRotate(num); 
            gotoSlide(num+1);
        };

        $('a').click(clickzor);

    };

    customSlider.init();

    // init

})( jQuery );

$(function(){
    $('#headSlider').customSlider();
});

这是我正在使用的非插件代码：

$(function() {
    $('#headSlider div.slide:first').addClass('active').show();
    var slideCount = $('.slider div.slide').length;
    var delayTime = 6000;
    var intervalID;



    function slideRotate(i) {
        $('.slider').children().fadeOut(500);
        $($('.slider div').get(i)).fadeIn(500);     
    }

    function rotate(i) 
    {            
        intervalID = setInterval(function() {
            if(i < slideCount -1)
            {
                i++;
            }
            else
            {
                i=0;
            }
            slideRotate(i);
        }, delayTime);
    }

    function gotoSlide(i)
    {        
        rotate(i-1);
    }

     $('a').click(function() 
    {     
        clearInterval(intervalID); 
        intervalID = null; 
        var num = parseInt($(this).text(),'') - 1; 
        slideRotate(num); 
        gotoSlide(num+1);
    });


    rotate(0);
});

我无法弄清楚我做错了什么。救命啊！

Answer 1

我认为问题在于您应该在扩展程序定义中调用init()。

$.fn.slider = function(options){
    ...definitions...
    init();
}

用于轮播的jQuery插件

1 个答案: