JavaScript 和 jQuery slider 无法双向工作

Question

我的 slider 代码中有一个错误，但我无法弄清楚它是什么...我可以使用任一箭头滚动我想要的方向，但是，如果我向一个方向滚动，然后向另一个方向滚动，而不需要刷新页面， slider 无法正常工作。

var box = $('.slider');
  var images = $('.images');
  images.addClass('hidden');
  images.eq(0).addClass('active');
  images.eq(0).removeClass('hidden');

  $("#arrow-right").click(function() {

    var image = box.find('.active');
console.log(image);
    images.removeClass('active');
    image.removeClass('zoomInLeft');
    image.addClass('zoomOutRight');
    if (image.index() + 1 == images.length) {
      var nextImage = images.eq(0);
    } else {
      nextImage = images.eq(image.index() + 1);
    }
    nextImage.removeClass('hidden');
    nextImage.addClass('active');
    nextImage.removeClass('zoomOutRight');
    nextImage.addClass('zoomInLeft');
  });

  $("#arrow-left").click(function() {

    var image = box.find('.active');
console.log(image);
    images.removeClass('active');
    image.removeClass('zoomInRight');
    image.addClass('zoomOutLeft');

    if (image.index() - 1 < 0) {
      var preImage = images.eq(2);
    } else {
      preImage = images.eq(image.index() - 1);
    }
    preImage.removeClass('hidden');
    preImage.addClass('active');
    preImage.removeClass('zoomOutLeft');
    preImage.addClass('zoomInRight');
  });

您可以在此处找到 slider 的实时版本:https://s.codepen.io/AdamHJacks/debug/bZaWKK#slider

感谢您的帮助!

Answer 1

您没有考虑到排队的事件图像可能以任一 ZoomOut 类结束的情况，因此修复方法是删除事件元素的两个 ZoomOut 类。

进行以下编辑:

nextImage.removeClass('zoomOutRight') => nextImage.removeClass('zoomOutLeft ZoomOutRight')

preImage.removeClass('zoomOutLeft') => preImage.removeClass('zoomOutRight ZoomOutLeft')