构建滑块组件_第 1 部分

news2024/10/5 13:58:18

前言

● 本次将和大家一起学习实现滑块的功能
在这里插入图片描述

● 由于这有些错乱，我们将用图片来代替，以实现功能
在这里插入图片描述

● 这里我们简单的说一下原理，如下图所示，通过改变tanslateX的值来达到滑动的效果，所以最核心的就是我们需要通过JavaScript来改变图片的切换
在这里插入图片描述

实例展示

● 首先，我们还是来获取我们需要的HTML元素，将其存储到变量中

const slides = document.querySelectorAll('.slide');
const slider = document.querySelector('.slider');

● 因为图片太大了，会被溢出，我们来缩小一下图片

slider.style.transform = 'scale(0.5)';

● 然后我们遍历滑块的内容，并且根据当前每个元素逐渐递增偏移的值，第一个0%,第二个100%，200%，300%

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

● 我们还需要获取按钮元素，存储到变量中

const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');

● 接着我们就要来写点击事件了

let curSlide = 0;

btnRight.addEventListener('click', function () {
  curSlide++;
  slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - curSlide)}%)`));
})

这里我们定义了一个变量，用它来每点击一次加1，这样当第一次点击的时候前一张图片translateX的值就是-100%，然后第二张0%，第三张100%，第四张200%，这要就能改变图片的位置了；

● 但是这样当我们滑动到最后一张图片的时候，并不会跳到第一个元素中，后面会一直往后移动，图片区域就是空白的了，所以我们可以告诉我们图片元素的长度，当达到图片长度的时候，将计数归零

const maxSlide = slides.length;
btnRight.addEventListener('click', function () {
  if (curSlide === maxSlide - 1) {
    curSlide = 0;
  } else { curSlide++; }

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

● 接下来，我们可以看到我们的代码非常的乱，并且有重复项目，现在就来重构一下代码，将相同的代码封装成函数

const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
const slider = document.querySelector('.slider');
let curSlide = 0;
const maxSlide = slides.length;
slider.style.transform = 'scale(0.5)';

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

goToSlice(0);

btnRight.addEventListener('click', function () {
  if (curSlide === maxSlide - 1) {
    curSlide = 0;
  } else { curSlide++; }

  goToSlice(curSlide);

})

● 然后我们就来处理向左的点击事件
btnLeft.addEventListener('click', function () {
  curSlide--;
  goToSlice(curSlide);
})

● 但是，这样还是会有之前向右的那个问题，所以我们要解决，当是第一个图片时候，向左滑动的话，会跳到第四个图片

btnLeft.addEventListener('click', function () {
  if (curSlide === 0) {
    curSlide = maxSlide - 1;
  } else {
    curSlide--;
  }

  goToSlice(curSlide);
})

● 接着，我们再次重构代码，完整代码如下

const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
let curSlide = 0;
const maxSlide = slides.length;

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

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

  goToSlice(curSlide);
}

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

  goToSlice(curSlide);
}

btnRight.addEventListener('click', nextSlide)

btnLeft.addEventListener('click', prevSlide)