用JS实现轮播图

用JS实现轮播图

1. 最简单的轮播图片，左右按钮负责控制轮播方向

• 先看效果图
• 代码地址: code.juejin.cn/pen/7367980…
• 核心js代码如下

let curIndex = 0;
const doms = {
  wapper: document.querySelector(".wapper"),
  sliderAll: document.querySelectorAll(".slider"),
  allowLeft: document.querySelector(".allow.left"),
  allowRight: document.querySelector(".allow.right"),
};
const sliderLength = doms.sliderAll.length; // 轮播图个数
const sliderWidth = doms.sliderAll[0].offsetWidth;

const moveTo = (index) => {
  const moveX = index * sliderWidth;
  doms.wapper.style.transform = `translateX(${-moveX}px)`;
  doms.wapper.style.transition = ".5s";
};
const moveLeft = () => {
  curIndex === 0 ? (curIndex = sliderLength - 1) : (curIndex -= 1);
  moveTo(curIndex);
};
const moveRight = () => {
  curIndex = (curIndex + 1) % sliderLength;
  moveTo(curIndex);
};

doms.allowLeft.addEventListener("click", moveLeft);
doms.allowRight.addEventListener("click", moveRight);

2. 现在给上面的效果添加无缝滚动。

首先使DOM结构变成下面这样

我们只需要在刚才的基础上添加一个初始化函数

const init = () => {
  const frist = doms.sliderAll[0].cloneNode(true)
  const last = doms.sliderAll[sliderLength - 1].cloneNode(true)
  last.style.position = 'absolute'
  last.style.top = '0'
  last.style.left = '0'
  last.style.transform = 'translateX(-100%)'
  doms.wapper.insertBefore(last, doms.wapper.firstChild) // 把最后一个元素的复制放在开头
  doms.wapper.appendChild(frist) // 第一个元素放到末尾
}

init()

继续修改按钮的事件

const moveTo = (index) => {
  const moveX = index * sliderWidth;
  doms.wapper.style.transform = `translateX(${-moveX}px)`;
  doms.wapper.style.transition = ".5s";
  curIndex = index;
};
const moveLeft = () => {
  if (curIndex === 0) {
    doms.wapper.style.transform = `translateX(${-sliderLength * 100}%)`;
    doms.wapper.style.transition = "none";
    // 强制渲染
    doms.wapper.getBoundingClientRect();
    moveTo(sliderLength - 1);
  } else {
    moveTo(curIndex - 1);
  }
};
const moveRight = () => {
  if (curIndex === sliderLength - 1) {
    doms.wapper.style.transform = `translateX(100%)`;
    doms.wapper.style.transition = "none";
    // 强制渲染
    doms.wapper.getBoundingClientRect();
    moveTo(0);
  } else {
    moveTo(curIndex + 1);
  }
};

-效果