2

对于 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();

我想要的是：一个脚本，它每 4 秒从当前元素中删除 Class 并添加到下一个锚类型元素，然后跳转到第一个元素并永远重复它。

这是一个与此有一些关系的已解决问题，尽管我也无法使其工作。

4

5 回答 5

6

就像是：

$(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/

于 2013-05-14T15:08:48.783 回答
3

我会这样：

JS

var $anchors = $('a.anchor'), counter = 0;

setInterval(function(){

  $anchors.removeClass('highlight');
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');

}, 4000);

标记

<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>

小提琴。

于 2013-05-14T15:04:45.873 回答
1

只需loopMenu在 20 秒后执行即可继续。

$("#anchor1").addClass("highlight");
function loopMenu(){
    //window.clearTimeout(); what was this for?
    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");}, 16000); // this was 12000, changed to 16000 probably a copy paste error
    setTimeout(loopMenu, 20000);
}
loopMenu();
于 2013-05-14T15:01:58.270 回答
0

对 jQuery 对象使用延迟而不是 setTimeout，这是一个更清晰的代码。

$("#anchor1").addClass("highlight");
function loopMenu(){
    $("#anchor1").delay(4000).removeClass("highlight");
    $("#anchor2").delay(4000).addClass("highlight");
    $("#anchor2").delay(8000).removeClass("highlight"));
    $("#anchor3").delay(8000).addClass("highlight"));
    $("#anchor3").delay(12000).removeClass("highlight");
    $("#anchor4").delay(12000).addClass("highlight");
    $("#anchor4").delay(16000).removeClass("highlight");
    $("#anchor1").delay(16000).addClass("highlight");
    setTimeout(loopMenu, 20000);
}
loopMenu();
于 2013-05-14T15:09:53.760 回答
0

在您的锚标记中，将属性类设置为等于“menuItem”之类的东西。然后在你的jQuery中做......

function startHighLighting(item, startTime, endTime) {    

    setInterval(function() {  
        item.addClass('highlight');  
        setInterval(function() {  
            item.removeClass('highlight');  
        }, endTime);  
    }, startTime);  
}

$("a.menuItem").each(function(index) {  
    var item = $(this),  
    baseTime = 4000,  
    highlightTime = baseTime * index,  
    unhighlightTime = baseTime * (index + 1);  

    startHighLighting(item, highlightTime, unhighlightTime);  
});

我为间距道歉。我仍在尝试找出其中的代码输入部分。

于 2013-05-14T15:32:41.070 回答