1

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

我已经做了一些技巧来解决这个问题，但它们都不起作用。有谁知道怎么回事？

4

1 回答 1

1

除了我的评论，你的小提琴可以做两种方式

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-26T11:15:51.773 回答