jQuery循环 - setTimeout,addClass,removeClass

Question

对于JavaScripters,我将是一个简单的.我进行了长时间的研究,但我找不到正确的答案.我想要一个菜单​​(基本上只是锚点而不是列表元素)突出显示为具有特定时间延迟的滑块.

此外,如果您知道如何使用$("#menu a")和$(this)来摆脱所有这些无用的id,那将是很好的.由于我不能做很多JavaScript(虽然我更喜欢简单),这里是我在jQuery中的糟糕代码,但它不是循环的.

$("#anchor1").addClass("highlight");

function loopMenu() {
    window.clearTimeout();
    setTimeout(function(){$("#anchor1").removeClass("highlight");}, 4000);
    setTimeout(function(){$("#anchor2").addClass("highlight");}, 4000);
    setTimeout(function(){$("#anchor2").removeClass("highlight");}, 8000);
    setTimeout(function(){$("#anchor3").addClass("highlight");}, 8000);
    setTimeout(function(){$("#anchor3").removeClass("highlight");}, 12000);
    setTimeout(function(){$("#anchor4").addClass("highlight");}, 12000);
    setTimeout(function(){$("#anchor4").removeClass("highlight");}, 16000);
    setTimeout(function(){$("#anchor1").addClass("highlight");}, 12000);
}

loopMenu();

我想:一个脚本,从当前元素和addClass消除类以每4秒下一个锚式元素,然后跳转到第一个元素,永远重复.

这是一个已解决的问题,与此有一些关系,虽然我也无法使其工作.

Answer 1

就像是:

$(function () {
  var $anchors = $('.anchor');

  (function _loop(idx) {
    $anchors.removeClass('highlight').eq(idx).addClass('highlight');
    setTimeout(function () {
      _loop((idx + 1) % $anchors.length);
    }, 4000);
  }(0));
});

有:

<a class="anchor">A</a>
<a class="anchor">B</a>
<a class="anchor">C</a>
<a class="anchor">D</a>
<a class="anchor">E</a>
<a class="anchor">F</a>
<a class="anchor">G</a>

http://jsbin.com/oselux/1/