如何显示特定幻灯片的活动幻灯片编号

Question

我使用 css3 clip 属性创建了带有 3 张幻灯片的滑块。单击幻灯片当前幻灯片剪辑（隐藏）并显示下一张幻灯片。底部的幻灯片编号也为 1 2 3，这是未激活的。

HTML

$('.slide').click(function() {
  var $target = $(this).next();
  if ($target.length == 0)
    $target = $('.slide:first');

  setTimeout(() => $(this).addClass('slide-clip').animate({
    'z-index': 1
  }), 500);
  $target.removeClass('slide-clip').animate({
    'z-index': 3
  });
});

.slider-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
}

.slider-wrapper slide h1 {
  margin-top: 20px;
}

.slide {
  position: absolute;
  width: 95%;
  height: 100%;
  padding: 80px 40px;
  text-align: center;
  background: #333;
  clip: rect(0 1060px 660px 0);
  -webkit-transition: linear .5s;
  transition: linear .5s;
  cursor: pointer;
}

.slide:nth-child(1) {
  background-color: #F69B9A;
  /*--magenta shade--*/
  z-index: 3;
}

.slide:nth-child(2) {
  background-color: #9DD3D9;
  /*--cyne shade--*/
  z-index: 2;
}

.slide:nth-child(3) {
  background-color: #FFBE6A;
  /*--yellow shade--*/
  z-index: 1;
}

.slide-clip {
  clip: rect(0 0 660px 0);
}

.slide-number {
  display: flex;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-x: 50%;
  text-align: center;
  z-index: 999;
}

.slide-number div {
  padding: 20px 10px;
  opacity: .5;
}

.slide-number {
  display: flex;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-x: 50%;
  text-align: center;
  z-index: 999;
}

.slide-number div {
  padding: 20px 10px;
  opacity: .5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrapper">
  <div class="slides">
    <div class="slide">content1</div>
    <div class="slide">content2</div>
    <div class="slide">content3</div>
  </div>
</div>
<div class="slide-number">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

上面的 jquery 代码可以很好地在单击时剪辑幻灯片（动画）。我希望添加 jquery - 在开始时幻灯片编号 1 将默认处于活动状态（不透明度 1），当单击幻灯片时，幻灯片编号 1 将停用，下一张幻灯片编号将处于活动状态，依此类推幻灯片编号 3。或任何解决方案。我有基本的 jquery 知识并且不深，所以请有人帮助我。

Answer 1

由于您需要跟踪当前显示的幻灯片和活动的幻灯片编号，并且它们都具有相同的索引，因此我将跟踪当前索引以便更容易选择这两个项目：

var $numbers = $('.slide-number').children();
var $slides = $('.slide');
var numSlides = $slides.length;
var currentSlide = 0;

$('.slide').click(function() {
    currentSlide = (currentSlide + 1) % numSlides;
    var $target = $slides.eq(currentSlide);

    setTimeout(() => {
        $(this).addClass('slide-clip').animate({ 'z-index': 1 });
        $numbers.eq(currentSlide).addClass('active').siblings().removeClass('active');
    }, 500);
    $target.removeClass('slide-clip').animate({ 'z-index': 3 });
});

在 CSS 部分，您需要定义一个 active 类，以便该数字的不透明度为 1：

.slide-number div.active {
    opacity: 1;
}

最后，您应该为第一项设置类active，这样数字1 的开头就有opacity1。由于您使用 CSS 显示第一张图片，我将直接在 HTML 中设置类：

<div class="wrapper">
     <div class="slides">
         <div class="slide">content</div>
         <div class="slide">content</div>
         <div class="slide">content</div>
     </div>
 </div>
 <div class="slide-number">
     <div class="active">1</div>
     <div>2</div>
     <div>3</div>
 </div>

Answer 2

不是 100% 确定你在尝试什么，但在这里我允许你点击数字或“幻灯片”

编辑：我将由您决定样式。添加文字来说明 注意：如果您希望动画看起来像这样同时发生变化：

currentSlide.removeClass('slide-clip active')
  .animate({
    opacity: 0,
    zIndex: 1,
    duration: 500
//  }, function() { // comment out
});// add me
    nextSlide.addClass('slide-clip active').animate({
      opacity: 1,
      zIndex: 2,
      duration: 500
    });
//  }); comment out

$(function() {
  $('.slides').on('click', '.slide', function(event) {
    let slides = $(event.delegateTarget).find('.slide');
    let last = slides.last().index('.slide');
    let currentSlide = $(this);
    let cIdx = currentSlide.index('.slide');
    let nextSlide = (last == cIdx) ? slides.first() : currentSlide.next('.slide');
    // tNext tells the numbers what to highlight
    let tNext = nextSlide.index('.slide');
    $('.numbers').eq(tNext).trigger('highlight');
    currentSlide.removeClass('slide-clip active')
      .animate({
        opacity: 0,
        zIndex: 1,
        duration: 500
      }, function() {
        nextSlide.addClass('slide-clip active').animate({
          opacity: 1,
          zIndex: 2,
          duration: 500
        });
      });
  }); //start first one
  $('.slide-number').on('highlight', 'div', function() {
    $(this).addClass('active')
      .siblings().removeClass('active');
  });

  $('.numbers').on('click', function() {
    let numbers = $('.numbers');
    let slideNumber = $(this);
    slideNumber.trigger('highlight');
    let cIdx = slideNumber.index('.numbers');
    let first = numbers.first().index('.numbers');
    let last = numbers.last('.numbers').index();
    // n is what to tell the slide to click
    let n = (last == cIdx) ? last - 1 : (first == cIdx) ? last : cIdx - 1;
    slideNumber.trigger('highlight');
    $('.slide').eq(n).trigger('click');
  }).first().trigger('click');
});

.slides {
  position: relative;
  align-items: center;
  height: 4em;
}

.slide {
  opacity: 0;
  top: 0.5em;
  left: 0.5em;
  padding: 0.5em;
  position: absolute;
}

.slide-number {
  display: flex;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-x: 50%;
  text-align: center;
  z-index: 999;
}

.slide-number div.numbers {
  padding: 20px 10px;
  opacity: .5;
}

.slide-number div.numbers.active {
  background-color: #AAEEEE;
}

.slide.active {
  border: dotted lime 1px;
  background-color: #FFdddd;
}

.slide.slide-clip {
  color: #FF0000;
}

.wrapper {
  border: 1px solid #DDDDDD;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrapper">
  <div class="slides">
    <div class="slide ">xxx</div>
    <div class="slide ">yyy big ol text in here</div>
    <div class="slide ">zzz</div>
  </div>
</div>
<div class="slide-number">
  <div class="numbers">1</div>
  <div class="numbers">2</div>
  <div class="numbers">3</div>
</div>
<div id="showstuff"></div>