簡單的jQuery傳送帶不能很好地工作

Question

我創建了一個簡單的jQuery傳送帶滑塊。你可以看到一個演示here

問題是，當我點擊右鍵按鈕的作品就像一個魅力，不幸的是，當我點擊左按鈕不工作作爲右按鈕的相反。有人可以提出任何想法，我怎麼能解決它。

我的js腳本：

function moveLeft() { 

$("#carousel").animate({marginLeft:'+400px'},1000,function(){ 
$(this).find(".slide-items:first").after($(this).find(".slide-items:last")); 
$(this).css({marginLeft:''}); 
}); 

} 

function moveRight() { 

$("#carousel").animate({marginLeft:'-400px'},1000,function(){ 
$(this).find(".slide-items:last").after($(this).find(".slide-items:first")); 
$(this).css({marginLeft:''}); 
}); 


} 

$('#left').on('click', function(){ 
moveLeft(); 
}); 

$('#right').on('click', function(){ 
moveRight(); 
}); 

觀看演示here

Answer 1

$(document).ready(function(){ 

function moveLeft() { 
$("#carousel").find(".slide-items:first").before($("#carousel").find(".slide-items:last")); 
$("#carousel").css({marginLeft:'-400px'}); 
$("#carousel").animate({marginLeft:''},1000,function(){ 
}); 

} 

function moveRight() { 

$("#carousel").animate({marginLeft:'-400px'},1000,function(){ 
$(this).find(".slide-items:last").after($(this).find(".slide-items:first")); 
$(this).css({marginLeft:''}); 
}); 


} 

$('#left').on('click', function(){ 
moveLeft(); 
}); 

$('#right').on('click', function(){ 
moveRight(); 
}); 


}); 

支票形式here