旋轉木馬的jQuery插件

因此，我是插件開發的全新人員，我一直致力於圖像傳送帶，並希望將其製作成插件。我想我已經想通了，但似乎無法做到。 init函數不會調用。這裏是我的插件代碼：旋轉木馬的jQuery插件

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

我想不出什麼我做錯了。幫幫我！

來源

2012-07-04 Chad

因爲jQuery UI的拖動滑塊被調用相同，所以您可能不應將其稱爲'slider（）'。它可能會導致衝突。 – teh1

讓我改變這一點。 – Chad

我認爲問題在於你應該在擴展定義中調用init()。

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

來源

2012-07-04 19:48:50 teh1

是的，它做到了。就像我說的，新的插件dev：P – Chad

旋轉木馬的jQuery插件

回答

相關問題