JavaScript 和 jQuery 滑块不能双向工作

Question

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

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');
  });

您可以在此处找到滑块的实时版本：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')