我创建了一个幻灯片显示，使用jQuery间隔地淡入和淡出图像。我在底部创建了一个导航区域，当您单击一个正方形时，它将显示该幻灯片。我需要协助的两件事。
当您单击导航方块时，计时将关闭，直到转到下一张自然幻灯片为止。
我需要当前幻灯片的正方形为其他颜色。我一直在尝试向具有匹配ID的正方形添加一个类，但是没有添加一个类。
$("#slideshow1 > div:gt(0)").hide();
var newvar = setInterval(function() {
var currentslide = $('.current').attr('id');
$('#slideshow1 > div:first')
.fadeOut(1000)
.next()
.addClass('current')
.fadeIn(1000)
.end()
.removeClass('current')
.appendTo('#slideshow1');
$('.slider-nav').removeClass('active');
$('.slider-nav[data-number=' + currentslide + ']').addClass('active');
}, 5000);
$(".slider-nav").click(function(e){
e.preventDefault();
var currentID = $(this).attr('href');
$('#slideshow1 > div:first').fadeOut(1000);
$('div'+currentID).fadeIn(1000).nextAll("div.slide").addBack().prependTo("#slideshow1");
$('.slider-nav').removeClass('active');
$('.slider-nav[data-number=' + currentID + ']').addClass('active');
clearInterval(newvar);
newvar = setInterval(function() {
$('#slideshow1 > div:first')
.fadeOut(1000)
.next()
.addClass('current')
.fadeIn(1000)
.end()
.removeClass('current')
.appendTo('#slideshow1');
$('.slider-nav').removeClass('active');
$('.slider-nav[data-number=' + currentID + ']').addClass('active');
}, 5000);
});
此幻灯片放映的网站是：http : //saratoga.mspaceap.com/
您的问题在这里：
$('.slider-nav[id=' + currentID + ']').addClass('active');
因为currentID是一个类似的字符串#1，因为您将它提前设置了三行：
var currentID = $(this).attr('href');
要修复，请将您的代码更改为：
$('.slider-nav[id=' + currentID.substr(1) + ']').addClass('active')
.siblings().removeClass('active'); // don't forget to do this
也就是说：您的导航元素和幻灯片不应具有相同的ID。ID应该始终是唯一的。我可以看到您正在使用来解决此问题.attr('id')，但这仍然不是一个好习惯。请改用通用data-属性或ID nav1。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句