0

私はプラグイン開発にまったく慣れていないので、画像カルーセルに取り組んでいて、それをプラグインにしたいと思っています。私はそれを理解したと思ったが、正しく理解できないようだ。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);
});

私は自分が間違っていることを理解できません。ヘルプ！

4

1 に答える 1

0

問題はinit()、拡張定義内で呼び出す必要があることだと思います。

$.fn.slider = function(options){
    ...definitions...
    init();
}
于 2012-07-04T19:48:50.360 に答える