jquery 图片滑块导航点不起作用

Question

我一直在尝试创建一个 jQuery 图像滑块。到目前为止，我设法让图像滑块在单击按钮时动画并滑动 forward/backward。现在，我正在尝试创建导航点。到目前为止，我已经成功地尝试让它们通过按钮 forward/backward 上的 animation/clicking。但是当我尝试单击圆点以显示活动幻灯片时，它不起作用。这是我的工作（我不会把整个代码放在你点击点时实现的函数）

代码如下：http://codepen.io/anon/pen/PGmRkR

$(document).ready(function() {
  sliderEvents();

});
var slides = $("#carousel .slides .slide")
var dots = $(".indicators .circle");

function sliderEvents() {

  dots.click(function() {

    var indeX = $(this).index();
    var currentSlide = slides.eq(indeX);
    currentSlide.addClass('active');
    $(this).addClass('blip');

    currentSlide.prev().removeClass('active');
    $(this).prev().removeClass('blip');
  });
}

html,
body {
  height: 100%;
  position: relative;
}
* {
  box-sizing: border-box;
}
#container {
  width: 90%;
  margin: 0 auto;
  height: 100%;
}
header {
  background: black;
  height: 20px;
  padding: 1.5em;
  color: white;
}
#carousel {
  position: relative;
  margin: 0 auto;
  width: 45%;
  margin-top: 15px;
  height: 100%;
}
.slide {
  position: absolute;
  max-width: 100%;
  z-index: 0;
}
.sliderbuttons {} #prev,
#next {
  position: absolute;
  background-color: rgba(255, 148, 41, 0.68);
  box-shadow: 2px white;
  border: none;
  font-size: 2em;
  color: white;
  font-weight: bold;
  /* font-family: 'Baloo Tamma', cursive;
    */
  padding: 10px;
  top: 15%;
  width: 10%;
  /*making the prev,next on top of content*/
  z-index: 2;
}
#prev {
  left: 0;
}
#next {
  right: 0;
}
.active {
  z-index: 1;
}
.indicators {
  z-index: 2;
  position: absolute;
  bottom: 49%;
  left: 45%;
}
.circle {
  border-radius: 10px;
  width: 10px;
  height: 5px;
  border: 2px solid black;
}
.indicators div {
  padding: 8px;
  margin: 2px;
  display: inline-block;
}
.blip {
  background-color: orange;
}
div.indicators:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Image carousel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="carouselcss.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>

<body>
  <div id="container">
    <header>
      header is here
    </header>
    <div id="carousel">
      <div class="sliderbuttons">
        <input type="button" name="next" id="next" value="&gt;">
        <input type="button" name="next" id="prev" value="&lt;">
      </div>
      <div class="slides">
        <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
        <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
        <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

      </div>
      <div class="indicators">
        <div class="circle blip"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>


    </div>

  </div>
  <script type="text/javascript" src="jquery-1.12.1.js"></script>
  <script type="text/javascript" src="jquery-ui.js"></script>
  <script type="text/javascript" src="carousel.js"></script>

</body>

</html>

Answer 1

您必须从每个元素中删除 blip 和 active 类，这样它们就不会相互堆叠。给你：http://codepen.io/denea/pen/wzdmoY

$(document).ready(function(){
sliderEvents();
//startSlider();

});

var slides = $("#carousel .slides .slide");
var dots=$(".indicators .circle");

function sliderEvents() {

dots.click(function () {

var indeX=$(this).index();
//console.log(indeX);
var currentSlide=slides.eq(indeX);
currentSlide.addClass('active');
$(this).addClass('blip');  

    $(".slides img").not(currentSlide).removeClass('active');
    $(".circle").not(this).removeClass('blip');
//console.log(currentSlide.prev().index());
});
}

jquery 图片滑块导航点不起作用

jquery Image slider navigation dots won't work

javascript

jquery

html

css

jquery-ui-slider