如何显示特定幻灯片的有效幻灯片编号

Question

我使用css3剪辑属性创建了带有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

不能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>

Answer 2

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

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在开始时具有opacity 1。由于您正在使用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>