JQuery轮播移动一个元素

Question

我尝试使用此代码创建自己的 JQuery 轮播，例如 http://coolcodez.net/create-infinite-carousel-in-jquery-using-a-few-lines-of-code/

$(document).ready(function () {
   $.fn.carousel = function () {
    var carousel = $(this);
    var width = carousel.find('li').width();
    setInterval(function() {
        carousel.delay(1000).animate({
            right: '+=' + width
        }, 1000, function () {
            var first = carousel.find('>:first-child');
            first.remove();
            $(this).append(first);
            $(this).css({
                right: '-=' + width
            });
        });
    }, 2000);

    return $(this);
};

    $('#carousel-1').carousel();
});

http://jsfiddle.net/n8b65qbb/33/

我每次都需要向左移动一张图像，但我的脚本无法正常工作。
如何修复它并使其以正确的方式工作？

Answer 1

您的代码中有一些错误。首先，我认为carousel 变量应该指向ul，而不是div。 first 变量的选择器很奇怪。此外，您应该使用detach 而不是删除。顺便说一句，有一个“跳跃”，因为您没有考虑动画中列表项之间的边距。

这是一个工作版本（仍然需要很大的改进）：

$(document).ready(function () {
    $.fn.carousel = function () {
        var carousel = $(this);
        var width = carousel.find('li').width() + 15; // Hardcoded margin

        setInterval(function () {
            carousel.animate({
                right: '+=' + width
            }, 1000, function () {
                var first = carousel.find("li:first-child").detach();
                $(this).find("ul").append(first); // The "ul" should be cached
                $(this).css({
                    right: '-=' + width
                });
            });
        }, 2000);

        return $(this);
    };

    $('#carousel-1').carousel();
});

Answer 2

一些想法和变化：

我建议将您的 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>

因此，这是您唯一需要的 CSS：

ul.carousel { 
  list-style: none;
  padding:0;
  height: 350px;
  white-space:nowrap;
  overflow:hidden;
  font-size:0;
}
ul.carousel li {
  display:inline-block;
  margin-left:15px;
}

关于您的插件，这是实现所需的简单方法，循环函数而不是使用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));

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

    var S = $.extend({
      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));


$(function () { // DOM ready
  $('#carousel-1').carousel();
});

ul.carousel { 
  list-style: none;
  padding:0;
  height: 350px;
  white-space:nowrap;
  overflow:hidden;
  font-size:0;
}
ul.carousel li {
  display:inline-block;
  margin-left:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
      <li>
        <img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
      </li>
      <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>
      <li>
        <img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
      </li>
    </ul>

关于更好的用户体验，我还建议您在 mouseenter 上完全暂停您的画廊，并在 mouseleave 上重新启动您的动画（尽管在这种情况下 setInterval 可能最适合。）