Jquery Carousel奇怪的动画

当我试图将div中的图像转换成Carousel时，我在Jquery中看到了奇怪的动画。这里是代码 -Jquery Carousel奇怪的动画

HTML

<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>

$(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); 
      }); 
     } 
    } 
});

因为这部分 -

$first.remove().css({ 'margin-left': '0px' }); 
$('.slider img:last').after($first);

的后会发生函数已执行，它会在传送带流中创建一个口吃。

有人可以告诉我我该如何使旋转木马顺利？

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

PLUS：我想转盘停止时，有人将鼠标悬停在任何图像。

来源

2017-09-19 Nishant Dixit

删除左边的元素，即不在场景中，也删除了它的右边距。您需要将其移动，以确保边距不在场景中。所以改变动画到 ... $first.animate({ 'margin-left': '-230px' }, ... 解决了问题

来源

2017-09-19 10:29:40 Nikita

是的，但图像最终没有显示为平滑，因为它们在开始时消失。最后没有动画。 –

Jquery Carousel奇怪的动画

回答

相关问题