不同距离的下一个按钮

Question

我试图用下一个按钮创建一个滑块，我的水平div内的图像大小不同。我可以将图像设置为固定宽度一次，我想用一个按钮点击图像。到目前为止我有这个：

<!-- wrapper holds slider -->
.rolodexWrapper {
width: 500px;
height: 300px;
margin: 0 auto;

}
<!-- slider holds images -->
.rolodexSlider {
height: 300px;
width: 2000px;
position: relative;

}


img{border: #FF0 solid 1px; margin:10px; float:left;}

//function will slide 500px but images are different size so 500px wont work?
$( function () {

$("a.right").click( function () {

        $(".rolodexSlider").stop().animate({
    left: "-500px",
  }, 500 );
return false;
});


});​


<ul class="rolodexLetters">
<li><a href="#" class="left">L</a></li>
<li><a href="#" class="right">R</a></li>
</ul>

<div class="rolodexWrapper">

<div class="rolodexSlider">

    <div><img src="" width="250px" height="100px" /></div>
    <div><img src="" width="200px" height="100px" /></div>
    <div><img src="" width="300px" height="100px" /></div>
    <div><img src="" width="275px" height="100px" /></div>

</div>
</div>​