jQuery Carousel函數問題

Question

我一直在編寫一個簡單的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); 
}; 

我要去後整理代碼，即時通訊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> 

你可以看到IVE包括jQuery的核心，我的旋轉木馬腳本，然後IVE呼籲DIV廠名轉盤方式，並通過一些設置在。

現在，這個功能在firefox中運行良好，但在IE，Safari，Chrome和Opera中沒有。

• IE說： 「對象犯規支持此屬性或方法」，並指出該線以上，其中我稱之爲 「$（ '＃DIV旋轉木馬'）makeCarousel」。 Chrome提供了2個錯誤：第一個表示「Uncaught TypeError：Object＃沒有方法'makeCarousel'」，下一個表示「Uncaught SyntaxError：意外的標記{」並指向我聲明函數的那一行：「 jQuery.fn.makeCarousel =函數（{slideWidth，numSlides，transTime，間隔}）{「

林在比特損失的這種情況，我已經正確聲明功能？它還能是什麼？它在firefox中運行得非常好，但是在其他任何地方都沒有。

任何與此有關的幫助將是非常令人滿意的！ 謝謝！

Tom

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