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可能最适合。）

JQuery轮播由一个元素转移

2 个答案: