javascript - jQuery 轮播幻灯片动画

Question

我正在研究 jQuery 轮播。这是我的代码:

  // CAROUSEL
  $('#left-arrow').click(previousSlide);
  $('#right-arrow').click(nextSlide);

function nextSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
    var width = $currentSlide.width();
    var $lastSlide = $('#carousel .slide-image:last')
    $currentSlide.animate({ 'margin-left': -width }, 1000, function() {
        $currentSlide.remove().css({ 'margin-left': '0px' });
        $lastSlide.after($currentSlide);
    });
  }

  function previousSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
  	var width = $currentSlide.width();
    var $last = $('#carousel .slide-image:last');
    $last.remove().css({ 'margin-left': -width });
    $currentSlide.before($last);
    $last.animate({ 'margin-left': '0px' }, 1000);
  }

/* CAROUSEL */
#slide1 {
  background-color: red;
}

#slide2 {
  background-color: blue;
}

#slide3 {
  background-color: magenta;
}


#carousel {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100vw;
  height: 75vh;
}

.slide-image {
  width: 100vw;
  height: 75vh;
  background-position: center;
  background-size: cover;
  display: inline-block;
}


.arrow {
  width: 2%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

#right-arrow {
  right: 30px;
}

#left-arrow {
  left: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="carousel">
      <div class="arrow" id="left-arrow">L</div>
      <div class="arrow" id="right-arrow">R</div>

      <div class="slide-image" id="slide1">
      </div>

      <div class="slide-image" id="slide2">
      </div>
      
      <div class="slide-image" id="slide3">
      </div>
    </section>

问题在于它的左侧和右侧的行为不同。如果您多次单击左侧，它只会根据一次单击的次数移动 slider 的次数。但是，如果您多次单击右侧，它始终只会移动一次。这是因为当前幻灯片被推送到最后一张幻灯片之前，并且还没有幻灯片。不过我希望它的行为与左侧相同，因此它应该能够移动多次。

我怎样才能实现这种行为？

Answer 1

尝试stoping当前动画并移至下一张幻灯片。

您可以使用 nextAnimation 等变量来检查动画是否仍在播放。

// CAROUSEL
  $('#left-arrow').click(previousSlide);
  $('#right-arrow').click(nextSlide);
  
  var nextAnimation = false;

function nextSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
    var width = $currentSlide.width();
    var $lastSlide = $('#carousel .slide-image:last');
    if(nextAnimation) {
      $currentSlide.stop();
      $currentSlide.remove().css({ 'margin-left': '0px' });
      $lastSlide.after($currentSlide);
      $currentSlide = $('#carousel .slide-image:first');
      width = $currentSlide.width();
      $lastSlide = $('#carousel .slide-image:last');
    }
    nextAnimation = true;
    $currentSlide.animate({ 'margin-left': -width }, 1000, function() {
        $currentSlide.remove().css({ 'margin-left': '0px' });
        $lastSlide.after($currentSlide);
        nextAnimation = false;
    });
  }

  function previousSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
  	var width = $currentSlide.width();
    var $last = $('#carousel .slide-image:last');
    $last.remove().css({ 'margin-left': -width });
    $currentSlide.before($last);
    $last.animate({ 'margin-left': '0px' }, 1000);
  }

/* CAROUSEL */
#slide1 {
  background-color: red;
}

#slide2 {
  background-color: blue;
}

#slide3 {
  background-color: magenta;
}


#carousel {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100vw;
  height: 75vh;
}

.slide-image {
  width: 100vw;
  height: 75vh;
  background-position: center;
  background-size: cover;
  display: inline-block;
}


.arrow {
  width: 2%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

#right-arrow {
  right: 30px;
}

#left-arrow {
  left: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="carousel">
      <div class="arrow" id="left-arrow">L</div>
      <div class="arrow" id="right-arrow">R</div>

      <div class="slide-image" id="slide1">1
      </div>

      <div class="slide-image" id="slide2">2
      </div>
      
      <div class="slide-image" id="slide3">3
      </div>
    </section>