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);
                           });

我的问题

如果你注意到这是一种糟糕的实现（至少猜测如此，如果错误请更正），我正在对animateImages进行函数调用，除了查询列表中的jquery（this）元素之外什么都不做动画制作完成后。我怎样才能有效地做到这一点？

提前致谢。

[加法注释] - 刚刚注意到jquery.each（）的最后一部分，他们提到了提前退出。基本上我想在循环的早期退出，但早期是在每次迭代之后。所以它就像回归（某事）

请为此提出一些更好的方法。如上所述，当我单击一个按钮时，控件将跳转到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上设置宽度并将overflow设置为hidden。

如何改进/纠正我的技术以实现图像滑块

1 个答案: