javascript - 创建带有暂停的简单旋转

Question

如何循环遍历一系列元素，添加一个类，暂停然后删除该类，然后继续处理下一个元素。我尝试过 setInterval 和 setTimeout，但似乎无法让它工作。

我的 JavaScript

var numpromos = $('.promoteBlock').length;
var promonum = 1;
while (numpromos > promonum){
    setInterval(function() { 
            $('#promoteCont .promoteBlock').fadeOut().removeClass('active');
            $('#promoteCont #promo'+promonum).addClass('active');   
        } 

    }, 3000);
    promonum++;
}

我的 HTML

<div id="promoteCont">
            <div id="promo1" class="promoteBlock">Promotion No.1</div>
            <div id="promo2" class="promoteBlock">Second Promo</div>
            <div id="promo3" class="promoteBlock">Another one</div>

         </div>

Answer 1

function playNext(){
    console.log("playNext");
    var active = $('#promoteCont').find(".promoteBlock.active");
    if( active.length == 0 )
        active = $(".promoteBlock:eq(0)");

    var fout = active.next();
    if( fout.length == 0 )
        fout = $(".promoteBlock:eq(0)");

    active.fadeOut().removeClass('active');
    fout.fadeIn().addClass('active');

    setTimeout(function(){
        playNext();
    },3000);
}

setTimeout(function(){
    playNext();
},3000);

http://jsfiddle.net/p1c3kzj7/