jQuery無限旋轉木馬：上一張幻燈片移動失敗

因此，我試圖構建一個無限的jQuery旋轉木馬，並且它在一個方向上工作得很好，但在另一個方向上工作得很好。那麼它在另一個工作，但只有一種。jQuery無限旋轉木馬：上一張幻燈片移動失敗

爲了無限操作發生的，這是我做的：

if(navId == 'forward') 
{ 
    $('#slides ul').animate({'left':left_indent},1200, function(){ 
    $('#slides li:last').after($('#slides li:first')); 
    $('#slides ul').css({'left':0}); 
}); 
} 

if(navId == 'backward') 
{ 
    $('#slides ul').animate({'left':right_indent},1200, function(){ 
    $('#slides li:first').before($('#slides li:last')); 
    $('#slides ul').css({'left':0}); 
});

正如你可以看到，它只是一些細微的DOM操作和它完美的「前進」，但對於「落後」，它很糟糕。你可以在這裏查看@JSFIDDLE

我已經做了一些技巧來解決這個問題，但他們都沒有工作。有人知道嗎？

來源

2012-11-26 Parijat Kalia

你只看到第一個'li'，當你移動backwars沒有'li'在左側，直到動畫之後。當向後移動時，您需要將最後一個元素移到列表中的第一個元素--AND - 設置「ul」左側位置，以顯示第二個元素。然後開始動畫 –

我會建議你使用一些分頁算法，因爲它是一個小錯誤，當多次點擊 –

分頁算法？ @AatishMolasi你能否詳細說明一下或指向一個資源？ –

除了我的評論，你fiddle which can do two way

function slideshow() 
{ 
    var item_width = $('#slides li').outerWidth(true); 
    var old_left = parseInt($('#slides ul').css('left')); 
    var left_indent = old_left - item_width; 
    var right_indent = old_left + item_width; 
    var navId = $(this).attr('id');  

    if(navId == 'forward') 
    { 
    $('#slides ul').animate({'left':left_indent},1200, function(){ 
     $('#slides li:last').after($('#slides li:first')); 
     $('#slides ul').css({'left':0}); 
    }); 
    } 

    if(navId == 'backward') 
    { 
    $('#slides li:first').before($('#slides li:last')); // <<< different 
    $('#slides ul').css({'left':-485});     // <<< different 
    $('#slides ul').animate({'left':0},1200, function(){// <<< different 
    }); 
    } 
}

來源

2012-11-26 11:15:51

jQuery無限旋轉木馬：上一張幻燈片移動失敗

回答

相關問題