用于轮播的jQuery插件

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();
}