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

之后我会整理代码，我是 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上调用了make carousel方法并传入了一些设置。

现在，这个功能在 Firefox 中运行良好，但在 IE、Safari、Chrome 和 Opera 中却不行。

• IE 说：“对象不支持此属性或方法”并指向上面我调用“$('div#carousel').makeCarousel”的行。

• Chrome 给出了 2 个错误：第一个说“未捕获的类型错误：对象 # 没有方法 'makeCarousel'”，下一个说“未捕获的语法错误：意外的令牌 {”并指向我声明函数的行： "jQuery.fn.makeCarousel = function({slideWidth, numSlides, transTime, interval}) {"

我对此有点茫然，我是否正确声明了该函数？还能是什么？它在 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);
  });
}