2011-06-29 5 views
0

私は自分のサイトにイメージローテーターを追加しようとしていますが、何らかの理由により、ローテーターを起動するために呼び出す必要のある機能が定義されていないとFirebugが教えてくれます。私のjQueryファイルはうまく読み込まれていて、イメージローテータスクリプトがロードされているので、何が間違っているのか分かりません。このサイトはheritage.newcoastmedia.comですが、私は先に行くと、スクリプトを投稿します:

;(function($) { 
    $.fn.featureList = function(options) { 
     var tabs = $(this); 
     var output = $(options.output); 

     new jQuery.featureList(tabs, output, options); 

     return this;  
    }; 

    $.featureList = function(tabs, output, options) { 
     function slide(nr) { 
      if (typeof nr == "undefined") { 
       nr = visible_item + 1; 
       nr = nr >= total_items ? 0 : nr; 
      } 

      tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current'); 

      output.stop(true, true).filter(":visible").fadeOut(); 
      output.filter(":eq(" + nr + ")").fadeIn(function() { 
       visible_item = nr; 
      }); 
     } 

     var options   = options || {}; 
     var total_items  = tabs.length; 
     var visible_item = options.start_item || 0; 

     options.pause_on_hover  = options.pause_on_hover  || true; 
     options.transition_interval = options.transition_interval || 5000; 

     output.hide().eq(visible_item).show(); 
     tabs.eq(visible_item).addClass('current'); 

     tabs.click(function() { 
      if ($(this).hasClass('current')) { 
       return false; 
      } 

      slide(tabs.index(this)); 
     }); 

     if (options.transition_interval > 0) { 
      var timer = setInterval(function() { 
       slide(); 
      }, options.transition_interval); 

      if (options.pause_on_hover) { 
       tabs.mouseenter(function() { 
        clearInterval(timer); 

       }).mouseleave(function() { 
        clearInterval(timer); 
        timer = setInterval(function() { 
         slide(); 
        }, options.transition_interval); 
       }); 
      } 
     } 
    }; 
}); 

そしてここでは、イメージローテータを開始するためのスクリプトです:

<script language="javascript"> 
    $(document).ready(function() { 

     $.featureList(
      $("#tabs li a"), 
      $("#output li"), { 
       start_item : 1 
      } 
     ); 
    }); 
</script> 
+3

どのラインでエラーが発生しますか? –

+1

';(function($){'。それはタイプミスですか? –

+0

先頭のセミコロンはなぜですか? – justkt

答えて

6

あなたのコードは、「無名関数を作成しますが、doesnのそれを呼び出す。

最後に(jQuery)を追加して関数を呼び出す必要があります。

+0

これは答えです。このような問題を発見するための素晴らしいツール(意味的に正しいjQueryですが、代入の代わりに文をぶら下げるようなもの)は、JSLintです:http://www.jslint.com/ - あなたのコードを解析し、論理エラーと悪いプログラミングのプラクティスを解析します。 –

+0

しかし、プラグインの最後に(jQuery)を追加すると、jQueryが定義されていないというエラーが表示されます })(jQuery); – user715564

+1

@user:以前はなく、jQueryを組み込んだ後にスクリプトを実行する必要があります。 – SLaks

0

あなたは$.featureList(

参照クロームエラーを行うことはできません。enter image description here

プラグインは、あなたがわずかにプラグインを作成するために右の構文を逃してきたオブジェクト

+0

?それはどういう意味ですか? *プラグインはオブジェクトに適用する必要があります* –

+0

実際には、できます。彼のプラグインを読んでください。 – SLaks

+1

いいえ。彼は自分のコードに$ .featureListを定義しています。問題は、関数を定義するコードが実際には実行されないことです(クロージャは定義しますが、決して実行しません)。 –

0

に適用する必要があります。あなたが本当に欲しいのは:

(function($) { 
    $.fn.featureList = function() { // etc; } 
    $.featureList = function() { // yet more etc; } 
})(jQuery); 
+1

正しい例ですが、* why *の説明が参考になります。最後に(jQuery)がなければ、クロージャー/関数を定義しているだけですが、内部でコードを実際に実行することはありません。 –

+0

良い点、心に留めておきます –

関連する問題