如何提高/纠正我下面的技术来实现图像滑块

Question

我有以下列表

<div id="imgrt"> 
<ul id="if"> 
    <li><img src="../pictures/album/20-c-44.jpg" /></li> 
    <li><img src="../pictures/album/21-c-44.jpg" /></li> 
    <li><img src="../pictures/album/u1-c-44.jpg" /></li> 
</ul> 
</div> 

我有一个按钮，它的点击会由每个图像推到左边距动画。 什么我有点所做的就是为

function animateImages(iD, index) { 
    var j = passedIndex; 
    iD.children().each(function(index){ 

     if (passedIndex == index) 
     jquery(this).animate(.........); 
     return (index+1); 
    }); 
} 
var nextIndex = 0; 
jquery('#next').click(function() { 
          nextIndex = animateImages(jquery('#li',nextIndex); 
          }); 

我的问题

1. ，如果你发现这是一种不好的实现（ATLEAST猜的话，请改正如果错了），我在做功能调用animateImages，它除了查询列表中的jquery（this）元素并且在动画之后破坏之外什么也不做。我怎样才能有效地做到这一点？

在此先感谢。

[添加备注] - 刚刚注意到jquery.each（）的最后部分，他们提到要尽早退出。基本上我想在循环中尽早退出，但早期是在每次迭代之后。所以它会像返回（somthing）

请为此建议一些更好的方法。如上所述，当我点击一个按钮时，控件将跳转到animateImages函数，该函数将浏览列表中的元素，为图像设置动画并返回列表中的索引。在下一次单击时，它将转到相同的列表，并检查索引，并且如果索引与列表元素相匹配，则为其设置动画并返回新的索引，等等。

Answer 1

我稍微修改它，以便当前图像有一个id：

<div id="imgrt"> 
<ul id="if"> 
    <li id="current"><img src="../pictures/album/20-c-44.jpg" /></li> 
    <li><img src="../pictures/album/21-c-44.jpg" /></li> 
    <li><img src="../pictures/album/u1-c-44.jpg" /></li> 
</ul> 
</div> 
<a href="#" id="next">Next</a> 

这样你的JavaScript可以是这样的：

$('#next').click(function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    var $current = $('#current'); 
    $('#current').next().attr('id','temp-curr'); 
    // animation code 
    $current.removeAttr('id'); 
    $('#temp-curr').attr('id','current'); 
}); 

我之所以这样说是所以只有一个元素拥有#current id，这样，如果任何其他代码绑定到它，它将不会因为有两个名为current的元素而运行时感到困惑。

我会添加您的动画代码并绑定它来滑动整个ul元素。而不是每次循环遍历整个列表。只需在#imgrt上设置宽度并将溢出设置为隐藏即可。