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;

}

Answer 1

尝试停止当前动画并移至下一张幻灯片。您可以使用变量来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>