构建滑块组件_第 2 部分

本篇我们继续学习滑块组件，让我们把滑块组件构建的更好；
● 首先，我们想要获取组件的三个点，首先在获取到他的HTML元素

const dotContainer = document.querySelector('.dots');

● 接着遍历 slides 数组，并在动态创建 元素。每个按钮表示一个幻灯片的点，

const createDots = function () {
  slides.forEach(function (_, i) {
    dotContainer.insertAdjacentHTML('beforeend', `<button class="dots__dot" data-slide="${i}"></button>`);
  });
};
createDots();

注意：createDots 函数遍历 slides 数组，并在 dotContainer 内动态创建 元素。每个按钮表示一个幻灯片的点或指示器，其中 data-slide 属性设置为 slides 数组中对应幻灯片的索引。
● 接着我们要创建活跃的点，及点击到第一个幻灯片中，第一个点就为白色

const activateDot = function (slide) {  //定义了一个名为 activateDot 的函数，接受一个参数 slide。这个函数的目的是激活与幻灯片相关联的点。
  document.querySelectorAll('.dots__dot').forEach(dot => dot.classList.remove('dots__dot--active'));//选择所有具有 dots__dot 类的元素，并迭代每个选定的点元素，并移除 dots__dot--active 类，从而将所有点重置为非活动状态。

  document.querySelector(`.dots__dot[data-slide="${slide}"]`).classList.add('dots__dot--active');//选择与提供的 slide 参数对应的特定点元素，激活与提供的 slide 索引相关联的点。
};
activateDot(0);  //让刷新时候第一个点自动为活跃状态

● 之后在切换下一张或者上一张，调用激活活跃参数函数

const nextSlide = function () {
  if (curSlide === maxSlide - 1) {
    curSlide = 0;
  } else { curSlide++; }

  goToSlice(curSlide);
  activateDot(curSlide);  //激活活跃状态
}

const prevSlide = function () {
  if (curSlide === 0) {
    curSlide = maxSlide - 1;
  } else {
    curSlide--;
  }

  goToSlice(curSlide);
  activateDot(curSlide);//激活活跃状态
}

● 之后我们讲来当我们按下键盘的右键或者左键的时候，幻灯片也会进行切换

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowLeft') prevSlide();
  e.key === 'ArrowRight' && nextSlide()
})

● 对 dotContainer 元素内点击事件的监听。当用户点击一个具有 dots__dot 类的元素时，它会获取该点对应的幻灯片索引，并调用函数来处理跳转到指定幻灯片并激活相应的点元素。

dotContainer.addEventListener('click', function (e) {
  if (e.target.classList.contains('dots__dot')) {
    const { slide } = e.target.dataset;
    goToSlice(slide);
    activateDot(slide);
  }
})

● 最后，让我们来重构一下我们这乱七八糟的代码把，重构的代码如下

//滑块滚动
const slider = function () {
  const slides = document.querySelectorAll('.slide');
  const btnLeft = document.querySelector('.slider__btn--left');
  const btnRight = document.querySelector('.slider__btn--right');
  const dotContainer = document.querySelector('.dots');
  let curSlide = 0;
  const maxSlide = slides.length;

  //函数
  const createDots = function () {
    slides.forEach(function (_, i) {
      dotContainer.insertAdjacentHTML('beforeend', `<button class="dots__dot" data-slide="${i}"></button>`);
    });
  };


  const activateDot = function (slide) {
    document.querySelectorAll('.dots__dot').forEach(dot => dot.classList.remove('dots__dot--active'));

    document.querySelector(`.dots__dot[data-slide="${slide}"]`).classList.add('dots__dot--active');
  };


  const goToSlice = function (slide) {
    slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`));
  }


  const nextSlide = function () {
    if (curSlide === maxSlide - 1) {
      curSlide = 0;
    } else { curSlide++; }

    goToSlice(curSlide);
    activateDot(curSlide);
  }

  const init = function () {
    createDots();
    activateDot(0);
    goToSlice(0);
  };
  init();

  const prevSlide = function () {
    if (curSlide === 0) {
      curSlide = maxSlide - 1;
    } else {
      curSlide--;
    }

    goToSlice(curSlide);
    activateDot(curSlide);
  }

  btnRight.addEventListener('click', nextSlide)
  btnLeft.addEventListener('click', prevSlide)

  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowLeft') prevSlide();
    e.key === 'ArrowRight' && nextSlide()
  })

  dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset;
      goToSlice(slide);
      activateDot(slide);
    };
  });
};
slider();

● 最后，我们删除图片，让原本的内容展现出来吧！