JQuery Div幻燈片顯示列表無插件

我試圖使用JQuery實現幻燈片放映而不使用插件。我在一個列表中有三個div，我希望每次單擊下一個按鈕時，當前div都會移出，並且下一個div會移入。不幸的是，當我單擊下一個按鈕時，列表中的所有三個div都移出。任何人都可以幫我解決這個問題嗎？我知道我可能需要一個循環來跟蹤當前的div，但我嘗試了很多，仍然找不到合適的解決方案。我會感謝您的幫助！JQuery Div幻燈片顯示列表無插件

這裏是我的html代碼：

<body> 
<div id="container"> 
    <ul> 
     <li><div>Lucy</div></li> 
     <li><div>Karolin</div></li> 
     <li><div>Ashley</div></li> 
    </ul> 
</div> 

<div id="button"><img src="next.png" /></div>

這是我的CSS代碼：

<style> 
*{margin:0;padding:0;} 

#container{ 
    height:200px; 
    width:200px; 
    overflow:hidden; 
    margin-left:5%; 
    margin-right:5%; 
    margin-top:5%; 
} 

ul li { 
    float:left; 
    list-style:none; 
    position:relative; 
} 

ul li div { 
    float:left; 
    height:200px; 
    width:200px; 
    background-color:yellow; 
    position:relative; 
} 

#button { 
    position:absolute; 
    margin-top:10%; 
}

這是我的jQuery代碼：

<script> 
$(document).ready(function(){ 
    var currentDiv = $('ul li div'); 
    var currentWidth = currentDiv.height(); 
    var totalWidth = currentDiv.length * currentWidth; 
    $('ul').css({ 
     width: function(){ 
      return totalWidth; 
     } 
    }); 

    $('#button').click(function(){ 
     $(currentDiv).animate({ 
      "margin-left":(-1*currentWidth)}, 1000) 
    }); 


});

非常感謝！

來源

2013-07-22 LucyScarlett