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') =＆gt; nextImage.removeClass('zoomOutLeft zoomOutRight')

preImage.removeClass('zoomOutLeft') =＆gt; preImage.removeClass('zoomOutRight zoomOutLeft')

JavaScript和jQuery滑块在两个方向都不起作用

1 个答案: