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

Question

Ive писал простую функцию 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); 
}; 

Im собирается привести в порядок кода после того, как, им relativley новых для 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, мой карусельного сценарий, а затем ив называется методом карусельного грим на DIV и прошел некоторые настройки в.

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

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

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

Im на немного потери с этим, я возвещаю функцию правильно? Что еще это может быть? Он отлично работает в firefox, но ни в чем другом.

Любая помощь с этим была бы значительно увеличена! Спасибо!

Том

Answer 1

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

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

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