Question

当我试图将-1内的图像转换为Carousel时，我在Jquery中获得了奇怪的动画效果。这是代码 -

div

$(function() {
  // vars for clients list carousel
  // http://stackoverflow.com/questions/6759494/jquery-function-definition-in-a-carousel-script
  var $clientcarousel = $('.slider');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 200); // 140px width for each client item 
  $clientcarousel.css('width', clientwidth);

  var rotating = true;
  var clientspeed = 0;

  seeclients = setInterval(rotateClients, clientspeed);

  function rotateClients() {
    if (rotating != false) {
      var $first = $('.slider img:first');
      var $last = $('.slider img:last');
      $first.animate({
        'margin-left': '-200px'
      }, 2000, "linear", function() {
        $first.remove().css({
          'margin-left': '0px'
        });
        $('.slider img:last').after($first);
      });
    }
  }
});

因为这部分 -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider" dir="ltr">
  <img src="http://via.placeholder.com/200x60" />
  <img src="http://via.placeholder.com/200x50" />
  <img src="http://via.placeholder.com/200x40" />
  <img src="http://via.placeholder.com/200x60" />
  <img src="http://via.placeholder.com/200x50" />
  <img src="http://via.placeholder.com/200x40" />
</div>

在$first.remove().css({ 'margin-left': '0px' }); $('.slider img:last').after($first);函数执行后发生，它会在轮播流中创建一个断断续续的行为。

有人能告诉我如何让旋转木马流畅吗？

这是上面代码的小提琴 - https://jsfiddle.net/qLtth77k/

PLUS ：当有人将鼠标悬停在任意图像上时，我希望旋转木马停止。

Answer 1

删除场景外的左侧元素也会删除它的右边距。你需要移动它，它的边缘也会超出场景。所以改变动画 ... $first.animate({ 'margin-left': '-230px' }, ... 解决问题

Jquery Carousel奇怪的动画

1 个答案: