Question

我使用SCSS，JavaScript和HTML构建了一个滑块。演示在这里：https://jsfiddle.net/rr7g6a1b/

let mySlider = {
  initializeSlider: function (options) {
    let slider = options.container;
    let slides = slider.querySelectorAll('.slide');
    let initialSlide = slider.querySelector('.slide[data-index="0"]');
    let initialButton = slider.querySelector('.pagination-button[data-index="0"]');
    initialSlide.classList.add('active');
    initialButton.classList.add('active');
    let sliderControlButton = slider.querySelector('.control-slider-button');
    if (options.autoplay === true) {
      sliderControlButton.classList.add('stop');
    } else {
      sliderControlButton.classList.add('play');
    }
    sliderControlButton.addEventListener('click', function () {
      mySlider.switchAutoplay(options);
    });
    for (let i = 0; i < slides.length; i++) {
      let button = slider.querySelector('.pagination-button[data-index="' + i + '"]');
      button.addEventListener('click', function () {
        mySlider.goToSlide(options, i);
        mySlider.stopAutoplay(options);
      });
    }
    if (options.autoplay === true) {
      options.autoplayer = window.setTimeout(function () {
        mySlider.goToNext(options);
      }, options.duration);
    }
  },
  switchAutoplay: function (options) {
    let sliderControlButton = options.container.querySelector('.control-slider-button');
    if (options.autoplay === true) {
      mySlider.stopAutoplay(options);
        sliderControlButton.classList.add('play');
        sliderControlButton.classList.remove('stop');
    } else {
      mySlider.startAutoplay(options);
        sliderControlButton.classList.remove('play');
        sliderControlButton.classList.add('stop');
    }
  },
  goToSlide: function (options, target) {
    let slider = options.container;
    let targetSlide = slider.querySelector('.slide[data-index="' + target + '"]');
    if (!targetSlide.classList.contains('active')) {
      let activeSlide = slider.querySelector('.slide.active');
      let activeButton = slider.querySelector('.pagination-button.active');
      let activeNum = activeSlide.dataset.index;
      let targetNum = parseInt(target);
      let go = false;
      let direction = 'left';
      if (targetNum < activeNum) {
        direction = 'right';
      }

      let targetButton = slider.querySelector('.pagination-button[data-index="' + target + '"]');
      activeButton.classList.remove('active');
      targetButton.classList.add('active');

      let moveTarget = function (direction) {
        let correct = direction;
        let opposite = (direction === 'left') ? 'right' : 'left';
        correct = 'hide-' + direction;
        opposite = 'hide-' + opposite;
        targetSlide.classList.add('transitioning');
        window.setTimeout(function () {
          targetSlide.classList.remove(correct);
          targetSlide.classList.add(opposite);
        }, 100);
        window.setTimeout(function () {
          targetSlide.classList.remove('transitioning');
        }, 150);
      };
      let moveActive = function (direction) {
        activeSlide.classList.remove('active');
        direction = 'hide-' + direction;
        activeSlide.classList.add(direction);
      };

      moveTarget(direction);
      window.setTimeout(function () {
        moveActive(direction);
        targetSlide.classList.remove('hide-left');
        targetSlide.classList.remove('hide-right');
        targetSlide.classList.add('active');
      }, 200);
    }
  },
  goToNext: function (options) {
    if (options.autoplay === true) {
      let slider = options.container;
      let currentSlide = slider.querySelector('.slide.active');
      let currentSlideIndex = currentSlide.dataset.index;
      let lastSlide = slider.querySelectorAll('.slide').length - 1;
      let nextSlide = 0;
      if (currentSlideIndex != lastSlide) {
        nextSlide = parseInt(currentSlideIndex) + 1;
      }
      mySlider.goToSlide(options, nextSlide);
      options.autoplayer = window.setTimeout(function () {
        mySlider.goToNext(options);
      }, options.duration);
    }
  },
  stopAutoplay: function (options) {
    options.autoplay = false;
    window.clearTimeout(options.autoplayer);
  },
  startAutoplay: function (options) {
    options.autoplay = true;
    options.autoplayer = window.setTimeout(function () {
      mySlider.goToNext(options);
    }, options.duration);
  }
};

let mainSlider = document.getElementById('main-slider');
let mainSliderOptions = {
  container: mainSlider,
  autoplay: false,
  duration: 6000
}
mySlider.initializeSlider(mainSliderOptions);

分页按钮在Chrome中运行良好，但在Safari中，点击按钮后，它们偶尔会闪烁或被切断。这种闪烁是否存在错误/解决方法？我不确定是什么导致了这个问题。

Answer 1

-webkit- browsers的Css解决方法。尝试将以下内容添加到闪烁按钮的CSS中。

if(#prompt('p_RPO', 'string', 'default')# = 'default') then ('whatever') else (#prompt('p_RPO', 'string', 'default')#)

按钮闪烁，隐藏在Safari中

1 个答案: