Question

我正在构建一个幻灯片演示文稿，该幻灯片演示文稿会预加载一个幻灯片，同时显示一个活动幻灯片并“保留”上一张幻灯片。在单击下一个或上一个按钮的过程中，将进行回调以延迟addClass()方法，该方法将缓慢显示文本（稍后将对其进行动画处理）。现在，它可以在div的第一个循环中使用，但是当您从头开始重新开始或者决定沿前一个方向返回时，它将不起作用。

我已经用我的特殊知识碰壁了，这时的任何投入都会受到赞赏。

$(document).ready(function(){
  $('.slide:eq(-1)').addClass('last');
  $('.slide:first').addClass('active').delay(1500).queue(function(){
    $(this).addClass('show-text');
  });
  $('.slide:eq(1)').addClass('next');
});

function prevSlide() {
  var $prevActive = $('.slide.active');
  var $prevSlide = $('.slide').eq(($prevActive.index() - 1) % $('.slide').length);
  var $afterPrevSlide = $('.slide').eq(($prevActive.index() - 2) % $('.slide').length);
  
  $('.slide').removeClass('last active show-text next');
  
  $prevActive.addClass('next');
  $prevSlide.addClass('active').delay(1500).queue(function(){
    $(this).addClass('show-text');
  });
  $afterPrevSlide.addClass('last');
}

function nextSlide() {
  var $activeSlide = $('.slide.active');
  var $nextSlide = $('.slide').eq(($activeSlide.index() + 1) % $('.slide').length);
  var $slideAfterNext = $('.slide').eq(($activeSlide.index() + 2) % $('.slide').length);
  
  $('.slide').removeClass('last active show-text next');
  
  $activeSlide.addClass('last');
  $nextSlide.addClass('active').delay(1500).queue(function(){
    $(this).addClass('show-text');
  });
  $slideAfterNext.addClass('next');

}

$('#prev').click(function(){
  prevSlide();
});
  
$('#next').click(function(){
  nextSlide();
});

body {
  font-family: sans-serif;
}



.slide-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  overflow: hidden;
}

.slide {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 70%;
  left: 140%;
  z-index: 0;
  transition: 1.25s;
}

.slide h2 {
  display: none;
  color: #fff;
  text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}

.slide.active.show-text h2 {
  display: block;
  animation: reveal-text 1.75s forwards;
}

@keyframes reveal-text {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#slide1 {
  background-image: url('https://picsum.photos/1250/1600/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#slide2 {
  background-image: url('https://picsum.photos/1200/1600/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#slide3 {
  background-image: url('https://picsum.photos/1200/1500/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#slide4 {
  background-image: url('https://picsum.photos/1300/1600/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide.last {
  left: 0;
  z-index: 0;
}

.slide.active {
  left: 0;
  z-index: 1;
}

.slide.next {
  left: 70%;
  z-index: 2;
}

.button-wrapper {
  display: flex;
  z-index: 10;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.button {
  background-color: rgba(255,255,255,0.85);
  height: 40px;
  border: none;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-wrapper">
  <div id="slide1" class="slide">
    <h2>Slide One.</h2>
  </div>
  <div id="slide2" class="slide">
    <h2>Slide Two.</h2>
  </div>
  <div id="slide3" class="slide">
    <h2>Slide three.</h2>
  </div>
  <div id="slide4" class="slide">
    <h2>Slide Four.</h2>
  </div>
  <div class="button-wrapper">
    <button id="prev" class="button">Prev</button>
    <button id="next" class="button">Next</button>
  </div>
</div>

JSFiddle：https://jsfiddle.net/e4qf7ma1/

Answer 1

更改幻灯片时，您必须a * b个事件。我在您的代码中添加了.dequeue()和$prevActive.dequeue();，对我来说很好。

https://jsfiddle.net/7gLbxhnq/5/

div的第一个周期后回调不起作用

1 个答案: