Проблемы с функцией jQuery Carousel

Я пишу простую функцию jquery, которая превращает div со списком изображений в карусель. Вот разметка..

<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>

Вы можете видеть, что я включил ядро ​​jquery, свой скрипт карусели, а затем вызвал метод make carousel для div и передал некоторые настройки.

Теперь эта функция отлично работает в Firefox, но не в IE, Safari, Chrome и Opera.

  • IE говорит: "Объект не поддерживает это свойство или метод" и указывает на строку выше, где я вызываю "$('div#carousel').makeCarousel".

  • Chrome выдает 2 ошибки: первая говорит: «Uncaught TypeError: объект # не имеет метода makeCarousel», а следующая говорит: «Uncaught SyntaxError: Unexpected token {» и указывает на строку, где я объявляю функцию: «jQuery. fn.makeCarousel = function({slideWidth, numSlides, transTime, interval}) {"

Я немного растерялся, правильно ли я объявил функцию? Что еще это может быть? Это работает очень хорошо в Firefox, но не во всем другом.

Любая помощь в этом будет принята с благодарностью! Спасибо!

Том


function jquery internet-explorer firefox opera
person cast01    schedule 30.12.2009    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваше определение функции неверно. Он должен принимать список параметров, но используемый вами синтаксис создает объект, а не список параметров.

Попробуй это:

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);
  });
}
person tvanfosson    schedule 30.12.2009
comment
Не могли бы вы объяснить, что делают следующие строки кода? options = jQuery.extend({slideWidth: 0, numSlides: 1, transTime: 100, interval: 5000}, options); И вернуть $(this).each( function() Еще раз спасибо! - person cast01; 30.12.2009
comment
options передаются как объект. Расширение (в данном случае) берет объект со значениями по умолчанию и заменяет значения по умолчанию любыми соответствующими значениями, найденными в аргументе options, а затем переназначает их обратно переменной options. Таким образом, вы знаете, что свойства, которые вы используете, существуют и имеют разумные значения. Выполнение return $(this).each -- позволяет применить ваш подключаемый модуль к нескольким элементам, если селектор соответствует более чем одному элементу, и позволяет объединить его в цепочку, поскольку возвращаемое значение представляет собой набор элементов, переданных в подключаемый модуль. - person tvanfosson; 30.12.2009
comment
Спасибо за объяснение, теперь я понимаю, где я ошибался, сработало удовольствие! Том - person cast01; 30.12.2009