Problèmes de la fonction jQuery Carousel

Question

J'ai écrit une simple fonction jquery qui transforme un div avec une liste d'images dans un carrousel. Voici le balisage ..

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

et dans mon fichier carousel.js j'ai la fonction de suivi ..

//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 va ranger le code après, im relativley nouveau à jquery.

J'ai alors ce qui suit dans l'en-tête du 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> 

Vous pouvez voir ive inclus le noyau jquery, mon script carrousel, puis ive appelé la méthode du carrousel de faire sur le div et passé certains paramètres dans.

Maintenant, cette fonction fonctionne bien dans Firefox, mais pas dans IE, Safari, Chrome et Opera.

• IE dit: "L'objet ne marche pas en charge cette propriété ou méthode" et les points à la ligne ci-dessus où j'appelle "$ ('carrousel div #') makeCarousel.". Chrome donne 2 erreurs: Le premier dit "TypeError Uncaught: Object # n'a pas de méthode 'makeCarousel'" et le suivant dit "Uncaught SyntaxError: Unxpected token {" et pointe vers la ligne où je déclare la fonction: " jQuery.fn.makeCarousel = function ({slideWidth, numSlides, TransTime, intervalle}) { "

Im à un peu de perte avec cela, ont été correctement déclarées i la fonction? Quoi d'autre cela pourrait-il être? Cela fonctionne très bien dans Firefox mais pas dans n'importe quoi d'autre.

Toute aide avec ceci serait grandement appréciée! Merci!

Tom

Answer 1

Votre définition de fonction est incorrecte. Cela devrait prendre une liste de paramètres mais la syntaxe que vous utilisez crée un objet, pas une liste de paramètres.

Essayez ceci:

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