Question

所以，我正在尝试构建一个无限的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

我已经做了一些技巧来解决这个问题，但它们都没有奏效。有谁知道怎么了？

Answer 1

除了我的评论，您的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
    });
  }
}

jQuery无限轮播：上一张幻灯片移动失败

1 个答案: