Question

我目前正在Javascript中构建一个小滑块哪个工作得很好（几乎），但我有一个问题！

你会在这里找到codepen链接： Slider

Line 22, 32, 38

我有两个导航应该添加一个活动的类（删除后），但是我的下一个/上一个按钮和滑块下方的其他按钮有一个移位。我无法找到解决方案而且很痛苦:(！

有什么想法吗？谢谢！

Answer 1

尝试使用此更改后的代码：

var currentSlide = 0;
var prevSlide = 0;
var slider = document.getElementById('slider').children[0];
var slides = document.getElementsByClassName('slider-item');
var links = document.getElementsByClassName('link');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var btnActive = document.getElementsByClassName('set-active');

for (var i = 0; i < slides.length; i++) {
  slider.style.width = (slides[0].clientWidth * slides.length) + 'px';
  links[i].innerHTML = i + 1;
  links[i].addEventListener('click', function(e) {
    e.preventDefault();

    prevSlide = currentSlide;
    currentSlide = this.getAttribute('data-href');


    slider.style.left = '-' + (100 * currentSlide) + '%';
    utils.addClass(links[currentSlide], 'active');
    utils.removeClass(links[prevSlide], 'active');

  });
}

function updateSlide() {

  slider.style.left = '-' + (100 * currentSlide) + '%';
    utils.addClass(links[currentSlide], 'active');
    utils.removeClass(links[prevSlide], 'active');
}

prev.addEventListener('click', function() {
  if(currentSlide == 0)
    return
  prevSlide = currentSlide;
  currentSlide--;

  updateSlide();
});
next.addEventListener('click', function() {  
  if(currentSlide == 10)
    return
  prevSlide = currentSlide;
  currentSlide++;
  updateSlide();
});

var utils = utils || (function() {
  'use strict';

  return {
    hasClass: function(el, cl) {
      var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
      return !!el.className.match(regex);
    },
    addClass: function(el, cl) {
      el.className += ' ' + cl;
    },
    removeClass: function(el, cl) {
      var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
      el.className = el.className.replace(regex, ' ');
    },
    toggleClass: function(el, cl) {
      var testClass = this.hasClass(el, cl) ? this.removeClass(el, cl) : this.addClass(el, cl);
    },
    getNextElementSibling: function(el) {
      if (el.nextElementSibling) {
        return el.nextElementSibling;
      } else {
        do {
          el = el.nextSibling;
        }
        while (el && el.nodeType !== 1);
        return el;
      }
    },
    elementInViewport: function(el) {
      var rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
      );
    },
    sameHeight: function(el) {
      var maxHeight = 0;
      for (var i = 0; i < el.length; i++) {
        var thisHeight = el[i].offsetHeight;
        if (thisHeight > maxHeight) {
          maxHeight = thisHeight;
        }
      }
      for (i = 0; i < el.length; i++) {
        el[i].style.height = maxHeight + 'px';
      }
    }
  };
})();

在javascript中解决与导航滑块的冲突

1 个答案: