使用JavaScript依次突出显示Divs

Question

我正在尝试创建一种灯的跑道，这就是现在的样子

http://jsfiddle.net/7nqvq/

var divs = document.querySelectorAll('div');
var index = 0;
setInterval(function(){
    if(index > divs.length+20){
        index = 0;
    }
    if(divs[index-1]){
        divs[index-1].className = '';
    }
    if(divs[index]){
        divs[index].className = 'active';
    }
    index++;
}, 50);

我不喜欢的是它完全不灵活且难以调整。此外，它还运行了其他20个空周期，这是错误的。有没有更好的方法来实现它（优选的纯JS）？看来SetInterval和SettieMout必须有一定的组合，但我只是无法正常工作。

Answer 1

我已经进行了一些调整以使用CSS animation，而不是随着过渡和班级切换而混乱。

更新的小提琴

现在所有的JavaScript都在定义每个点的动画延迟。

您可以调整：

• 动画延迟 - 我只有i/10，但是您可以将其制作i/5，i/20 ...实验！
• 动画持续时间 - 设置为我的小提琴中的1s，但请尝试更短，更长的时间，看看会发生什么
• 指示何时褪色的50%

Answer 2

怎么样

function cycle(selector, cssClass, interval) {
    var elems = document.querySelectorAll(selector),
        prev = elems[0],
        index = 0,
        cssClassRe = new RegExp("\s*\b" + cssClass + "\b");
    if (elems.length === 0) return;
    return setInterval(function () {
        if (prev) prev.className = prev.className.replace(cssClassRe, "");
        index %= elems.length;
        elems[index].className += " " + cssClass;
        prev = elems[index++];
    }, interval);
}

和

var runwayIntval = cycle("div", "active", 100);

和某个时候

clearInterval(runwayIntval);

请参阅：http：//jsfiddle.net/arny8/1/

---

当然，您可以说切换CSS课程有些有限。您可以使用两个回调函数：一个要开启可自由定义的效果，一个将其关闭：

function cycle(elems, enable, disable, interval) {
    var prev = elems[0], index = 0;
    if (elems.length === 0) return;
    return setInterval(function () {
        index %= elems.length;
        if (prev) disable.call(prev);
        enable.call(elems[index]);
        prev = elems[index++];
    }, interval);
}

和

var cycleIntval = cycle(
    document.querySelectorAll("div"), 
    function () { 
        this.className += " active";
    },
    function () { 
        this.className = this.className.replace(/s*bactiveb/, "");
    },
    100
);