jquery 图像滑块导航点不起作用答案

【问题标题】：jquery Image slider navigation dots won't workjquery 图像滑块导航点不起作用
【发布时间】：2016-09-26 23:26:07
【问题描述】：

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

这里是代码：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>

【问题讨论】：

感谢您的回复！这些点适用于一组。就像如果你点击圆圈 1，幻灯片 1 就会出现。但是当重新单击第 1 圈时，幻灯片不显示。我不确定如何将圆圈链接到幻灯片。我是 javascript/jquery 的新手
你能修复你的 jsfiddle 以便我帮忙吗？它对我不起作用（图片在点击时不会改变）
jsfiddle 似乎缺少一些 jquery 库。我已经把代码放在这里codepen.io/anon/pen/PGmRkR 它应该可以工作
这很奇怪。这个对我有用。你能看到点吗？你试过点击它们吗？
我明白了，但它不可点击。试试这个jsfiddle.net/6qntgg5z/10，我试图盲目地修复它。这个想法是删除隐藏幻灯片的 blip 和 active 类。

标签： javascript jquery html css jquery-ui-slider

【解决方案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());
});
}

【讨论】：

成功了！谢谢 :) 是的，这就是我一直在尝试做的（从先前单击的元素中删除类 blip 和 active），但我不知道正确的语法。
太好了，您可以将其标记为解决方案，以防它对您有所帮助。