jquery - 导航点未激活

Question

在我的 slider 中有几个导航点。每次转到新 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%;">
  <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>

我的 CSS

  html{
  background: black;
  }

  .banner_wrapper img{
   position: absolute;
  }

  .banner-nav-wrapper {
  left: 46%;
  position: absolute;
  top: 80%;
  }

  .banner-nav-wrapper a{
  display:block;
  width:13px;
  height:14px;
  background:url(http://i.imgur.com/J8UrHgn.png) top left no-repeat;
  float:left;
  margin:0 5px 0 0;
  }

  .banner-nav-wrapper a.active_inside span{
  display:block !important;
  background:url(http://i.imgur.com/NxoSIbh.png) top left no-repeat;
  width:100%;
  height:100%;
  }

  .banner-nav-wrapper a.inactive_inside span{
  display:block !important;
  background:url(http://i.imgur.com/J8UrHgn.png) top left no-repeat;
  width:100%;
  height:100%;
  }

  .banner-nav-wrapper a span{
  display:none;   
  width:100%;
  height:100%;
  background:url(http://i.imgur.com/NxoSIbh.png) top left no-repeat;
  }


  .left-arrow {
  background: none repeat scroll 0 0 black;
  left: 5.2%;
  position: absolute;
  top: 27%;
  z-index: 1;
  }

  .left-arrow img{
  position: relative;
  }

  .right-arrow {
  background: none repeat scroll 0 0 black;
  position: absolute;
  right: 5.2%;
  top: 27%;
  }

  .right-arrow img{
  position: relative;
  }

我的JS

  $(".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");      
  });
});

这是一个演示链接:CODEPEN

Answer 1

问题是您从所有的添加和删除类。相反，您应该只从删除类之前选择了并且add class只有next 。我刚刚添加了查找next的机制。你的 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");    
  });

    });

这是一个演示链接:CODEPEN