0

画像のリストを含むdivをカルーセルに変換する単純なjquery関数を作成してきました。これがマークアップです。

<div id="carousel">
  <ul>
   <li><img src="images/music1.jpg" /></li>
   <li><img src="images/music2.jpg" /></li>
   <li><img src="images/music3.jpg" /></li>
  </ul>
 </div>

そして私のcarousel.jsファイルには次の機能があります。

//Function turns a div with a list of images into a carousel
//=====
jQuery.fn.makeCarousel = function({slideWidth, numSlides, transTime, interval}) {
 //== Get Element and store id==//
 var id = $(this).attr("id");
 var element = "#" + id;

 // Function
 setInterval(function(){
  //Store Variables
  var currentLeft = $(element + ' ul').css("left");
  var left = parseFloat(currentLeft, 10);
  var moveBy = left - slideWidth;

  //Slide the list, and stop it being moved out of bounds
  if(moveBy < ((numSlides - 1) * slideWidth) * -1) {
   $(element + ' ul').animate({left : "0px" }, transTime);
  } else {
   $(element + ' ul').animate({left : moveBy + "px" }, transTime);
  }
 },interval);
};

後でコードを整理します。jqueryは初めてです。

次に、htmlのヘッダーに次のものがあります。

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/carousel.js" type="text/javascript"></script>

 <script type="text/javascript">
  $(function() {

   $('div#carousel').makeCarousel({
    slideWidth: 500, 
    numSlides: 3, 
    transTime: 2000, 
    interval: 3000
   });

  });
 </script>

iveにはjqueryコア、私のカルーセルスクリプトが含まれており、iveはdivでmake carouselメソッドを呼び出し、にいくつかの設定を渡しました。

現在、この関数はFirefoxで正常に動作しますが、IE、Safari、Chrome、Operaでは動作しません。

  • IEは、「オブジェクトはこのプロパティまたはメソッドをサポートしていません」と述べ、「$（'div＃carousel'）。makeCarousel」を呼び出す上記の行を指しています。

  • Chromeは2つのエラーを出します。最初のエラーは「UncaughtTypeError：Object＃has no method'makeCarousel'」で、次のエラーは「Uncaught SyntaxError：Unexpected token {」で、関数を宣言した行を指しています：「jQuery.fn.makeCarousel = function（{slideWidth、numSlides、transTime、interval}）{ "

これで少し途方に暮れていますが、関数を正しく宣言しましたか？他に何ができるでしょうか？それはFirefoxで本当にうまく機能しますが、他の何でも機能しません。

これに関するどんな助けも大いに感謝されるでしょう！ありがとう！

トム

4

1 に答える 1

2

関数の定義が正しくありません。パラメータのリストを取得する必要がありますが、使用している構文はパラメータリストではなくオブジェクトを作成します。

これを試して：

jQuery.fn.makeCarousel = function(options) {
  options = jQuery.extend({slideWidth : 0, numSlides: 1, transTime: 100, interval: 5000}, options);

  return $(this).each( function() {

   var $this = $(this);    
   // Function
   setInterval(function(){
      //Store Variables
      var currentLeft = $(element + ' ul').css("left");
      var left = parseFloat(currentLeft, 10);
      var moveBy = left - options.slideWidth;

      //Slide the list, and stop it being moved out of bounds
      if(moveBy < ((options.numSlides - 1) * options.slideWidth) * -1) {
           $this.find('ul').animate({left : "0px" }, options.transTime);
      } else {
           $this.find('ul').animate({left : moveBy + "px" }, options.transTime);
      }
    },options.interval);
  });
}
于 2009-12-30T13:29:04.507 に答える