Question

在我的滑块中我有导航点，假设在点击时显示正确的图像，但是当我点击我的点时，一个点消失，我点击的点不会变为活动状态，如果我再次点击我的点向左移动，如果我再次点击，我的点完全消失。

我不知道哪里出错了。我的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>

<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;
}

我的JS

$(".banner-nav-wrapper a").click(function(){
  if($(".active_inside").next(".banner_wrapper").length < 1){
      $(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
        $(this).addClass("active_inside").removeClass("inactive_inside");
      });
  }else{
      $(".active_inside").next().animate({"left":0+"%","opacity":1}, 500,function(){
        $(this).addClass("active_inside").removeClass("inactive_inside");
      });
  }




  if($(".active_inside").prev().length < 1){
    $(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){
      $(this).addClass("active_inside").removeClass("inactive_inside");
    });
  }else{
    $(".active_inside").prev().animate({"left":0+"%","opacity":1}, 500,function(){
      $(this).addClass("active_inside").removeClass("inactive_inside");
    });
  }

  $(".active_inside").animate({"left":0+"%","opacity":0}, 500,function(){
    $(this).addClass("inactive_inside").removeClass("active_inside"); 
  });
});

这是一个演示：DEMO

Answer 1

试试这个：你需要先计算下一个活动元素的索引，然后对其应用active_inside并从其他元素中删除。

您需要按banner_wrapper

中点击的a元素显示/隐藏banner-nav-wrapper个元素

$(function(){
$(".banner-nav-wrapper a").click(function(){
  //calculate next active element index.
  var nextIndex = $(this).index();

  //remove active_inside from current active element
  $(".active_inside").addClass("inactive_inside").removeClass("active_inside");

  //apply active_inside to next active element
  $(this).animate({"left":0+"%","opacity":1}, 500,function(){
     $(this).addClass("active_inside").removeClass("inactive_inside");
  });

  //hide currently visible 'banner_wrapper' element and show next 'banner_wrapper'
  // on the basis of next index calculated.
  $('.banner_wrapper:visible').animate({"left":0+"%","opacity":0}, 500,function(){
     $('.banner_wrapper:eq('+nextIndex+')').animate({"left":0+"%","opacity":1}, 500,function(){
     });
  }); 
});
});

<强> JSFiddle Demo

导航点未更改为正确的图像

1 个答案: