javascript - 让 JQuery 幻灯片只迭代一次？

Question

所以我想制作每两秒切换一次的图片幻灯片，我有这段代码。

HTML:

<div class="fadeIn">
    <img src="img/city.png" class="remimg" id="city">
    <img src="img/shop.png" class="remimg" id="shop">
    <img src="img/ice-cream-cone.png" class="remimg" id="icecream">
</div>

JavaScript:

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
        $('.fadeIn :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.fadeIn');}, 
        2000);
}); 

如何让它只迭代一次？

Answer 1

在不附加图像的情况下使用递归函数可能更容易，然后在到达最后一张图像时停止

$(function() {
    var all   = $('.fadeIn img'),
        first = all.first(),
        last  = all.last();

    all.not(first).hide();

    (function fn(image) {
        setTimeout(function() {
            var f = image.fadeOut().next().fadeIn();
            if ( f.get(0) !== last.get(0)  ) fn(f);
        }, 2000);
    }(first));
});

FIDDLE