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 に答える