Jquery 导航点未激活
在我的滑块中,我有几个导航点。每次你转到一个新的滑块,下一个点就会变成蓝色,这意味着它处于活动状态。我遇到的问题是,当我转到下一张幻灯片时,我所有的点都变得不活跃 我的HTMLJquery 导航点未激活,jquery,css,slider,Jquery,Css,Slider,在我的滑块中,我有几个导航点。每次你转到一个新的滑块,下一个点就会变成蓝色,这意味着它处于活动状态。我遇到的问题是,当我转到下一张幻灯片时,我所有的点都变得不活跃 我的HTML <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 slider-wrapper"> <div class="banner_wrapper active_banner" style="opacity: 1; left: 0%;"> <i
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 slider-wrapper">
<div class="banner_wrapper active_banner" style="opacity: 1; left: 0%;">
<img class="bgwidth" src="http://i.imgur.com/YW5Y1YX.jpg">
</div>
<div class="banner_wrapper inactive_banner" style="opacity: 0; left: 100%;">
<img class="bgwidth" src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="banner_wrapper inactive_banner" style="opacity: 0; left: -100%;">
<img class="bgwidth" src="http://i.imgur.com/cEcFlSA.jpg">
</div>
<a class="left-arrow nav_arrows" href="javascript:void(0);">
<img src="http://i.imgur.com/6UVHSG4.png">
</a>
<a class="right-arrow nav_arrows" href="javascript:void(0);">
<img src="http://i.imgur.com/pbt7K94.png">
</a>
<div class="banner-nav-wrapper">
<a class="active_inside" href="javascript:void(0);">
<span></span>
</a>
<a class="inactive_inside" href="javascript:void(0);">
<span></span>
</a>
<a class="inactive_inside" href="javascript:void(0);">
<span></span>
</a>
</div>
我的JS
这里有一个指向演示的链接:问题是您在所有的中添加和删除类。相反,您应该只从以前选择的中删除类,而只将类添加到下一个。我刚刚添加了查找下一个的机制。
您的JS代码如下所示:
$(".nav_arrows").click(function(){
$direction = ($(this).hasClass("left-arrow") ? "left" : "right");
var activeBanner = 100;
var nextButton;
if($direction == "right"){
$(".inactive_banner").css("left","100%").show();
activeBanner = -100;
if($(".active_banner").next(".banner_wrapper").length < 1){
$(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper a").eq(0);
}else{
$(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper .active_inside").next();
}
}else{ //left
$(".inactive_banner").css("left","-100%").show().fadeTo(250, 0);
if($(".active_banner").prevAll().length < 1){
$(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper a").eq($(".banner_wrapper").length-1);
}else{
$(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper .active_inside").prev();
}
}
$(".active_banner").animate({"left":activeBanner+"%","opacity":0}, 500,function(){
$(this).addClass("inactive_banner").removeClass("active_banner");
$(".banner-nav-wrapper .active_inside").addClass("inactive_inside").removeClass("active_inside");
nextButton.addClass("active_inside").removeClass("inactive_inside");
});
});
这里有一个演示链接:非常感谢。我开始拔头发了。
$(".nav_arrows").click(function(){
$direction = ($(this).hasClass("left-arrow") ? "left" : "right");
var activeBanner = 100;
if($direction == "right"){
$(".inactive_banner").css("left","100%").show();
activeBanner = -100;
if($(".active_banner").next(".banner_wrapper").length < 1){
$(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
$(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");
}else{
$(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
$(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");
}
}else{ //left
$(".inactive_banner").css("left","-100%").show().fadeTo(250, 0);
if($(".active_banner").prev().length < 1){
$(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
$(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");
}else{
$(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
$(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");
}
}
$(".active_banner").animate({"left":activeBanner+"%","opacity":0}, 500,function(){
$(this).addClass("inactive_banner").removeClass("active_banner");
$(".banner-nav-wrapper a").addClass("inactive_inside").removeClass("active_inside");
});
});
$(".nav_arrows").click(function(){
$direction = ($(this).hasClass("left-arrow") ? "left" : "right");
var activeBanner = 100;
var nextButton;
if($direction == "right"){
$(".inactive_banner").css("left","100%").show();
activeBanner = -100;
if($(".active_banner").next(".banner_wrapper").length < 1){
$(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper a").eq(0);
}else{
$(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper .active_inside").next();
}
}else{ //left
$(".inactive_banner").css("left","-100%").show().fadeTo(250, 0);
if($(".active_banner").prevAll().length < 1){
$(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper a").eq($(".banner_wrapper").length-1);
}else{
$(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){
$(this).addClass("active_banner").removeClass("inactive_banner");
});
nextButton = $(".banner-nav-wrapper .active_inside").prev();
}
}
$(".active_banner").animate({"left":activeBanner+"%","opacity":0}, 500,function(){
$(this).addClass("inactive_banner").removeClass("active_banner");
$(".banner-nav-wrapper .active_inside").addClass("inactive_inside").removeClass("active_inside");
nextButton.addClass("active_inside").removeClass("inactive_inside");
});
});