我创建了一个幻灯片,使用 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
。
将 setInterval 分配给如下所示的变量:
$("#slideshow1 > div:gt(0)").hide();
var interval = setInterval(function() {
var currentslide = $('.current').attr('id');
$('#slideshow1 > div:first')
.fadeOut(1000)
.next()
.addClass('current')
.fadeIn(1000)
.end()
.removeClass('current')
.appendTo('#slideshow1');
}, 5000);
}
然后在单击处理程序中使用clearInterval
,如下所示:
$(".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[id=' + currentID + ']').addClass('active');
clearInterval(interval);
});
这样,您的间隔将在点击时重置。