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>

你可以看到ive包含了jquery核心，我的轮播脚本，然后我在div上调用了make carousel方法并传递了一些设置。

现在，这个函数在firefox中运行良好，但在IE，Safari，Chrome和Opera中运行不正确。

IE说：“对象不支持此属性或方法”并指向上面的行，我称之为“ $（'div #carousel'）。makeCarousel ”。
Chrome提供了2个错误：第一个说“未捕获TypeError：对象＃没有方法'makeCarousel'”，下一个说“Uncaught SyntaxError：Unexpected token {”并指向我声明该函数的行： “ 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);
  });
}

jQuery Carousel功能问题

1 个答案: