Question

我有一个带箭头的滑块。当我多次点击这些箭头时，滑块会不断滑动，具体取决于我点击箭头的次数。在滑动动画完成之前，如何防止点击箭头？

请在我的笔中查看我的意思：http://codepen.io/gianaguilar/pen/JGaxKL

尝试多次单击箭头以及滑块的响应方式。我需要一次只能滑动一次。

谢谢！

这是jquery代码

var $visibleSlide, getDataSlide, sliderInterval, getDataNextSlide, getDataPrevSlide, getDataNavDot;
var fadeDuration = 1000;
var pause = 8000;

//show first slide
$('.slides li:first-child').css('display', 'block');

//show first nav dot
$('.nav li:first-child').addClass('active-cd');

//find out what slide is visible and get its data attribute
function getSlideInfo() {
  $visibleSlide = $('.slides').find('li:visible');
  getDataSlide = $visibleSlide.data('n');
  getDataNextSlide = $visibleSlide.next().data('n');
  getDataPrevSlide = $visibleSlide.prev().data('n');
}

//show next slide
function showNextSlide() {
  getSlideInfo();

  $('.nav li').removeClass('active-cd');

  if (getDataSlide < 3) {
    $visibleSlide.fadeOut(fadeDuration);
    $visibleSlide.next().fadeIn(fadeDuration);
    $('.nav li[data-cd=' + getDataNextSlide + ']').addClass('active-cd');
  } else {
    $visibleSlide.fadeOut(fadeDuration);
    $('.slides li:first-child').fadeIn(fadeDuration);
    $('.nav li:first-child').addClass('active-cd');
  }
} //end showNextSlide

function showPrevSlide() {
  getSlideInfo();

  $('.nav li').removeClass('active-cd');

  if (getDataSlide > 1) {
    $visibleSlide.fadeOut(fadeDuration);
    $visibleSlide.prev().fadeIn(fadeDuration);
    $('.nav li[data-cd=' + getDataPrevSlide + ']').addClass('active-cd');
  } else {
    $visibleSlide.fadeOut(fadeDuration);
    $('.slides li:last-child').fadeIn(fadeDuration);
    $('.nav li:last-child').addClass('active-cd');
  }

} // end showPrevSlide

// controls
$('.next').on('click', showNextSlide);
$('.prev').on('click', showPrevSlide);

//autoplay
function startSlider() {
  sliderInterval = setInterval(showNextSlide, pause)
}
startSlider();
$('.slideshow').mouseenter(function() {
  clearInterval(sliderInterval);
});
$('.slideshow').mouseleave(startSlider);

//control dots clicks
$('.nav li').on('click', function() {
  getDataNavDot = $(this).data('cd');
  getSlideInfo();

  $('.nav li').removeClass('active-cd');
  $(this).addClass('active-cd');

  $visibleSlide.fadeOut(fadeDuration);
  $('.slides li[data-n=' + getDataNavDot + ']').fadeIn(fadeDuration);
}); //end dots click

Answer 1

您可以定义当您处于下一个或上一个幻灯片功能时设置为isAnimating的变量true，并在动画完成时设置为false（在回调中）功能到你的一个淡入淡出功能。）

如果isAnimating函数设置为true，则在这些下一个和上一个函数的顶部进行简单检查以返回false将阻止动画排队。

见这里：http://codepen.io/anon/pen/XXPOQY

如何在滑块动画完成之前防止滑块箭头多次单击

1 个答案: