对于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从当前元素和addClass移除到下一个锚类型元素,然后跳转到第一个元素并永远重复它。
Here is a solved question与此有一些关系,虽然我也无法使其发挥作用。
答案 0 :(得分:5)
类似的东西:
$(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>
答案 1 :(得分: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>
答案 2 :(得分:1)
只需在20秒后执行loopMenu
即可继续。
$("#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();
答案 3 :(得分: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();
答案 4 :(得分: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);
});
我为间距道歉。我还在试图找出这个代码输入部分。