jQuery的旋轉木馬不循環

Question

我目前工作的一個jQuery的旋轉木馬，其除了一個事實，即最後和第一項不循環，從而創造無限旋轉木馬

在這裏所有的瀏覽器工作正常的The JS

$(document).ready(function() { 
    //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item. 
    $('#profile-container ul li:first').before($('#profile-container ul li:last')); 

    //when user clicks the image for sliding right 
    $('#right_scroll img').click(function(){ 

     //get the width of the items (i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too) ' 
     var item_width = $('#profile-container ul li').outerWidth() + 20; 

     //calculate the new left indent of the unordered list 
     var left_indent = parseInt($('#profile-container ul').css('left')) - item_width; 

     //make the sliding effect using jquery's animate function 
     $('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function() { 

      //THIS LINE ISN'T WORKING (it's how the infinite effects is made) 
      $('#profile-container ul li:last').after($('#profile-container ul li:first')); 

      //THIS LINE ISN'T WORKING 
      $('#profile-container ul').css({'left' : '-100px'}); 
     }); 
    }); 

    //when user clicks the image for sliding left 
    $('#left_scroll img').click(function(){ 

     var item_width = $('#profile-container ul li').outerWidth() + 20; 

     /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */ 
     var left_indent = parseInt($('#profile-container ul').css('left')) + item_width; 

     $('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function(){ 

     /* THIS LINE ISN'T WORKING */ 
     $('#profile-container ul li:first').before($('#profile-container ul li:last')); 

     /* THIS LINE ISN'T WORKING /* 
     $('#profile-container ul').css({'left' : '-100px'}); 
     }); 

    }); 
}); 

由於某種原因，//獲取第一個列表項行只是不起作用。

這裏的HTML

<div id="profile-wrapper"> 
     <div id='left_scroll'><img src="<?php echo get_template_directory_uri(); ?>/library/images/left.png" /></div> 
     <div id="profile-container"> 
      <ul> 
       <li><a href="#" class="profile-image image-1"></a></li> 
       <li><a href="#" class="profile-image image-2"></a></li> 
       <li><a href="#" class="profile-image image-3"></a></li> 
       <li><a href="#" class="profile-image image-4"></a></li> 
       <li><a href="#" class="profile-image image-5"></a></li> 
      </ul> 
     </div> 
     <div id='right_scroll'><img src="<?php echo get_template_directory_uri(); ?>/library/images/right.png" /></div> 
    </div> 

最後的CSS

#profile-wrapper { 
display: table; 
margin: 20px auto; 
} 

#profile-container { 
float:left; /* important for inline positioning */ 
width: 390px; /* important (this width = width of list item(including margin) * items shown */ 
overflow: hidden; /* important (hide the items outside the div) */ 
} 

#profile-container ul { 
position: relative; 
left: -95px; /* important (this should be negative number of list items width(including margin) */ 
list-style-type: none; /* removing the default styling for unordered list items */ 
width:9999px; /* important */ 
/* non-important styling bellow */ 
margin-top: 20px; 
padding-bottom:10px; 
} 

#profile-container ul li { 
position: relative; 
float: left; /* important for inline positioning of the list items */ 
width:80px; /* fixed width, important */ 
/* non-important styling bellow */ 
background-color: #f5f5f5; 
height: 80px; 
border-radius: 95px; 
-khtml-border-radius: 95px; 
-moz-border-radius: 95px; 
-webkit-border-radius: 95px; 
margin-right: 20px; 
z-index: 100; 
} 

#left_scroll, #right_scroll { 
height: 80px; 
width: 80px; 
-khtml-border-radius: 95px; 
-moz-border-radius: 95px; 
-webkit-border-radius: 95px; 
position: relative; 
z-index: 100; 
float: left; 
margin: 20px 20px; 
} 

#left_scroll img, #right_scroll img{ 
/*styling*/ 
cursor: pointer; 
cursor: hand; 
} 

.image-1 { 
background: url('../../library/images/profiles/1.jpg'); 
background-position: center; 
} 

.image-2 { 
background: url('../../library/images/profiles/2.jpg'); 
background-position: center; 
} 

.image-3 { 
background: url('../../library/images/profiles/3.jpg'); 
background-position: center; 
} 

.image-4 { 
background: url('../../library/images/profiles/4.jpg'); 
} 

.image-5 { 
background: url('../../library/images/profiles/5.jpg'); 
background-position: center; 
} 

.profile-image { 
display: block; 
height: 70px; 
width: 70px; 
position: relative; 
top: 5px; 
left: 5px; 
border-radius: 90px; 
-khtml-border-radius: 90px; 
-moz-border-radius: 90px; 
-webkit-border-radius: 90px; 
} 

任何投入將是有益的......想我已經涵蓋了一切。

非常感謝

克里斯

Answer 1

替換的兩個實例：

$('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function() { 

有了：

$('#profile-container ul').animate({'left' : left_indent},500,function() {