CSS jQuery - 在我的滑块中将项目符号作为指示器

Question

我用jQuery构建了一个滑块。但是仍然缺少一件事，我想要指示器，以便用户可以在图像之间切换。这应该可以通过.bullet-points和.thumbnails img

我

真的找不到使用特殊标记的方法，我该怎么做？

这是代码

https://codepen.io/Insane415/pen/yXboEV

$(document).ready(function() {
  var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
  var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
  var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
  var backgrounds = ["blue", "yellow", "green", "grey"];
  i = 1;
  var time = 3000;
  setInterval(function() {
    if (i != 0) {
      images[i - 1].removeClass("active");
      text[i - 1].removeClass("active");
      thumbnails[i - 1].removeClass("active-thumbnail");
    }
    if (i == images.length) {
      i = 0
    }
    images[i].addClass("active");
    text[i].addClass("active");
    thumbnails[i].addClass("active-thumbnail");
    $(".slider").css("background-color", backgrounds[i]);
    i++;
  }, time);
});

.text-holder p {
  margin: 0;
}
.slider {
  padding: 20px;
  margin: 50px;
  /*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/
  background-color: blue;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.thumbnails {
  height: 100%;
}
.thumbnails img {
  max-width: 50px;
  display: block;
  margin-bottom: 10px;
}
.text-holder .text {
  display: none;
}
/*display active image*/
.active {
  display: block!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail {
  display: none!important;
}
.bullet-points {
  display: block;
  text-align: center;
}
.bullet-points a {
  font-size: 30px;
  text-decoration: none;
  color: inherit;
}
/*.image-holder{
      max-width: 350px!important;
    }
    
    .image-holder img{
      max-width: 350px!important;
    }*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="slider">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="image-holder">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" style="display:none;" class="active">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg" style="display:none;">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg" style="display:none;">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg" style="display:none;">
        </div>
        <div class="bullet-points">
          <a href="_self">&bull;</a>
          <a href="_self">&bull;</a>
          <a href="_self">&bull;</a>
          <a href="_self">&bull;</a>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnails">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active-thumbnail">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
          <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="text-holder">
          <div class="text active">
            <p>Lorem Ipsum</p>
            <h1>Giant Heading 1</h1>
            <p>Some more text</p>
          </div>
          <div class="text">
            <p>Lorem Ipsum</p>
            <h1>Giant Heading 2</h1>
            <p>Some more text</p>
          </div>
          <div class="text">
            <p>Lorem Ipsum</p>
            <h1>Giant Heading 3</h1>
            <p>Some more text</p>
          </div>
          <div class="text">
            <p>Lorem Ipsum</p>
            <h1>Giant Heading 4</h1>
            <p>Some more text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以尝试这样的事情。

创建一个滑块函数，而不是像在当前代码中那样用作匿名函数。

将单击时事件绑定到.thumbnails img和.bullet-points a，您可以控制该事件中的逻辑。

创建一个变量来控制当前幻灯片，以便当用户从一个幻灯片跳到另一个幻灯片时，幻灯片显示正确显示。

$(document).ready(function() {
  var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
  var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
  var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
  var backgrounds = ["blue", "yellow", "green", "grey"];
  var i = 0;
  var currentSlide = 0;
  var time = 3000;
  var sliderTimer = setInterval(slider, time);
  // slider navigation
  $('.bullet-points a, .thumbnails img').click(function(e) {
    e.preventDefault();
    var pos = $(this).index();
    clearInterval(sliderTimer); // stop auto slideshow
    sliderTimer = false;
    slider(pos);
  });
  function slider(pos) {
    currentSlide = i;
    if (typeof(pos) !== 'undefined') {
      i = pos;
      images[currentSlide - 1].removeClass("active");
      text[currentSlide - 1].removeClass("active");
      thumbnails[currentSlide - 1].removeClass("active-thumbnail");
    }
    if (i != 0) {
      images[i - 1].removeClass("active");
      text[i - 1].removeClass("active");
      thumbnails[i - 1].removeClass("active-thumbnail");
    }
    if (i == images.length) { i = 0 }
    images[i].addClass("active");
    text[i].addClass("active");
    thumbnails[i].addClass("active-thumbnail");
    $(".slider").css("background-color", backgrounds[i]);
    i++;
    if (!sliderTimer) {
      sliderTimer = setInterval(slider, time); // start auto slideshow
    }
  }
});

.text-holder p{margin: 0;}
.slider{
  padding:20px;
  margin: 50px;
  /*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/
  background-color: blue;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.thumbnails{
  height: 100%;
}
.thumbnails img{
  max-width: 50px;
  display: block;
  margin-bottom: 10px;
}
.text-holder .text{
  display: none;
}
/*display active image*/
.active{
  display: block!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
  display: none!important;
}
.bullet-points{
  display: block;
  text-align: center;
}
.bullet-points a{
  font-size: 30px;
  text-decoration: none;
  color: inherit;
}
/*.image-holder{
  max-width: 350px!important;
}
.image-holder img{
  max-width: 350px!important;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="image-holder">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" style="display:none;" class="active">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg" style="display:none;">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg" style="display:none;">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg" style="display:none;">
          </div>
          <div class="bullet-points">
            <a href="_self">&bull;</a>
            <a href="_self">&bull;</a>
            <a href="_self">&bull;</a>
            <a href="_self">&bull;</a>
          </div>
        </div>
        <div class="col-md-2">
          <div class="thumbnails">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active-thumbnail">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
            <img src="http://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
          </div>
        </div>
        <div class="col-md-6">
          <div class="text-holder">
            <div class="text active">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 1</h1>
              <p>Some more text</p>
            </div>
            <div class="text">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 2</h1>
              <p>Some more text</p>
            </div>
            <div class="text">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 3</h1>
              <p>Some more text</p>
            </div>
            <div class="text">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 4</h1>
              <p>Some more text</p>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>