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奇怪的動畫

回答

相關問題