Javascript JQuery旋转木马按一个元素移位

我尝试使用以下代码作为示例来创建自己的JQuery旋转木马

我需要每次向左移动一个图像，但我的脚本无法正常工作。

---

如何修复它并使其以正确的方式工作？

您的代码中有一些错误。首先，我认为

carousel

变量应该指向

ul

，而不是

div

。

第一个

变量的选择器很奇怪。此外，您应该使用

分离
，而不是删除。顺便说一下，有一个“跳跃”，因为您没有考虑动画中列表项之间的间距

以下是一个有效版本（仍需大幅改进）：

一些想法和变化：

我建议您将HTML和CSS约束到真正需要的元素，以实现所需的功能，这就是
UL
。保持简约和简单：

<ul id="carousel-1" class="carousel clearfix">
  <li>
    <img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
  </li>
  <li>
    <img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
  </li>
</ul>

对于您的插件，这是一种实现所需功能的简单方法，循环函数而不是使用
setInterval
：

(function($) {
  $.fn.carousel = function( options ) {

    return this.each(function() {
      var ul = this,
          w = $("li", ul).outerWidth(true);

      (function loop(){
        $(ul).delay(2000).animate({scrollLeft : w}, 700, function(){
          $(this).append( $('li:first', ul) ).scrollLeft(0);
          loop();
        });  
      }());

    }); 
  };
}(jQuery));

您可以从上面的代码中看到，没有硬编码宽度值（除了延迟和动画之外，但在后面的代码中）导致使用
outerWidth（true）它将说明LI元素的填充、边距和边框

现在你正在构建一个插件，对吗？您可能希望允许用户轻松修改默认插件值，如：

$('#carousel-1').carousel({
    pause : 3400,
    animate : 700
});

只需扩展插件即可接受可编辑选项：

(function($) {
  $.fn.carousel = function( options ) {

    var S = $.extend({ // Default Settings
      pause : 2000,
      speed : 700
    }, options );

    return this.each(function() {
      var ul = this,
          w = $("li", ul).outerWidth(true);

      (function loop(){
        $(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
          $(this).append( $('li:first', ul) ).scrollLeft(0);
          loop();
        });  
      }());

    }); 
  };
}(jQuery));


（函数（$）{
$.fn.carousel=功能（选项）{
var S=$.extend({
暂停：2000年，
速度：700
}，选项）；
返回此值。每个（函数（）{
var ul=这个，
w=$（“li”，ul）。外径（真）；
（函数循环（）{
$（ul）.delay（S.pause）.animate（{scrollLeft:w}，S.speed，function（））{
$（this.append（$（'li:first'，ul））.scrollLeft（0）；
loop（）；
});  
}());
}); 
};
}（jQuery））；
$（函数（）{//DOM就绪
$（'#carousel-1'）。carousel（）；
});
ul.carousel{
列表样式：无；
填充：0；
高度：350px；
空白：nowrap；
溢出：隐藏；
字号：0；
}
ul.carousel li{
显示：内联块；
左边距：15px；
}














比“不起作用”更具描述性。它做错了什么？你想发生什么？我需要一次轮班，因为只剩下一个项目。
(function($) {
  $.fn.carousel = function( options ) {

    return this.each(function() {
      var ul = this,
          w = $("li", ul).outerWidth(true);

      (function loop(){
        $(ul).delay(2000).animate({scrollLeft : w}, 700, function(){
          $(this).append( $('li:first', ul) ).scrollLeft(0);
          loop();
        });  
      }());

    }); 
  };
}(jQuery));

$('#carousel-1').carousel({
    pause : 3400,
    animate : 700
});

(function($) {
  $.fn.carousel = function( options ) {

    var S = $.extend({ // Default Settings
      pause : 2000,
      speed : 700
    }, options );

    return this.each(function() {
      var ul = this,
          w = $("li", ul).outerWidth(true);

      (function loop(){
        $(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
          $(this).append( $('li:first', ul) ).scrollLeft(0);
          loop();
        });  
      }());

    }); 
  };
}(jQuery));