轮播图的简单实现flex版

const leftBtn = document.getElementsByClassName("carousel__trigger__left")[0];
const rightBtn = document.getElementsByClassName("carousel__trigger__right")[0];
const container = document.getElementsByClassName("carousel__container")[0];
let curIndex = 0;
const len = 4;
leftBtn.addEventListener("click", () => {
  if (curIndex <= 0) {
    return;
  }
  curIndex--;
  container.style.setProperty(
    "transform",
    `translate3d(-${curIndex * 100}%,0,0)`
  );
});
rightBtn.addEventListener("click", () => {
  if (curIndex >= len) {
    return;
  }
  curIndex++;
  container.style.setProperty(
    "transform",
    `translate3d(-${curIndex * 100}%,0,0)`
  );
});

// 接着上面的js继续往下写
const points = document.getElementsByClassName(
  "carousel__trigger__point__item"
);
for (let i = 0; i < points.length; i++) {
  points[i].addEventListener("click", () => {
    curIndex = i;
    container.style.setProperty(
      "transform",
      `translate3d(-${curIndex * 100}%,0,0)`
    );
  });
}

let timer;
const carousel = document.getElementsByClassName("carousel")[0];
let dir = 1;
carousel.addEventListener("mouseenter", () => {
  if (timer) {
    clearInterval(timer);
  }
});

carousel.addEventListener("mouseleave", () => {
  timer = setInterval(() => {
    if (curIndex === 0) {
      dir = 1;
    } else if (curIndex === len - 1) {
      dir = -1;
    }
    if (dir === 1) {
      curIndex++;
    } else {
      curIndex--;
    }
    container.style.setProperty(
      "transform",
      `translate3d(-${curIndex * 100}%,0,0)`
    );
  }, 2000);
});

let timer;
const carousel = document.getElementsByClassName("carousel")[0];
let dir = 1;
carousel.addEventListener("mouseenter", () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
// 封装成一个timerCall函数
function timerCall() {
  if (curIndex === 0) {
    dir = 1;
  } else if (curIndex === len - 1) {
    dir = -1;
  }
  if (dir === 1) {
    curIndex++;
  } else {
    curIndex--;
  }
  container.style.setProperty(
    "transform",
    `translate3d(-${curIndex * 100}%,0,0)`
  );
}

carousel.addEventListener("mouseleave", () => {
  if (timer) {
    return;
  }
  setInterval(timerCall, 2000);
});
timer = setInterval(timerCall, 2000);

class Carousel {
  // ... 这里写代码
}

class Carousel {
  imgUrlArray;
  mountNode;

  __root;
  __render;
  __timer;
  __curIndex;
  __ms;
  __triggerLeftBtnElement;
  __triggerRightBtnElement;
  __triggerPointElements;
  __imgElements;
  __imgContainer;

  constructor(imgUrlArray, config) {
    // 传入一个数组，存放url或者其他，可以通过config的render来配置每一个位置的渲染
    if (!Array.isArray(imgUrlArray)) {
      console.warn("argument 'imgUrl' must be an Array");
      imgUrlArray = [];
    }
    this.imgUrlArray = imgUrlArray.slice();
    // config配置
    const {
      // 挂载的节点，传入一个dom对象
      mountNode,
      // 轮播的时间
      ms = 2000,
      // 渲染函数，默认直接渲染内容
      render = (v) => v,
    } = config;
    if (!mountNode) {
      throw new Error("argument 'root' in config must be exist");
    }
    this.mountNode = mountNode;
    this.__render = render;
    this.__curIndex = 0;
    this.__ms = ms;
    this.__dir = 1;
    // 创建整个轮播图的dom
    this.createRoot();
  }
}

class Carousel {
  // 所有改变curIndex的逻辑都要放到fn里面
  callWithStyleUpdate(
    fn = noop,
    callbacks = {
      before: this.clearStyle,
      after: this.setStyle,
    }
  ) {
    const { before, after } = callbacks;
    // 清除样式
    before.call(this, this.__curIndex);
    // 执行逻辑，可能下一张，可能上一张，可能通过小点切换
    fn();
    // 赋予新的节点样式
    after.call(this, this.__curIndex);
  }

  // 清除改变前对应curIndex节点样式
  clearStyle(curIndex) {
    const { __triggerPointElements } = this;
    // 这里只要把小店的active删除即可，样式比较简单
    __triggerPointElements[curIndex].classList.remove("active");
  }

  // 设置改变后对应curIndex节点的样式
  setStyle(curIndex) {
    const { __triggerPointElements, __imgContainer } = this;
    // 整个container要便宜到新的位置
    __imgContainer.style.setProperty(
      "transform",
      `translate3d(-${curIndex * 100}%,0,0)`
    );
    // 给对应小点赋值上active
    __triggerPointElements[curIndex].classList.add("active");
  }
}

class Carousel {
  createRoot() {
    // 给节点赋值class列表
    function setClass(node, classList) {
      if (!Array.isArray(classList)) {
        classList = [classList];
      }
      classList.forEach((className) => {
        node.classList.add(className);
      });
    }

    // 创建一个节点，然后赋值对应class
    function createElement(tag, classList) {
      const ele = document.createElement(tag);
      setClass(ele, classList);
      return ele;
    }

    // 创建根，也就是div.carousel，是整个轮播图的最外层容器
    this.__root = createElement("div", "carousel");
    const { __root: root, imgUrlArray } = this;

    // 依次是对应的节点
    const container = createElement("div", "carousel__container");
    const triggers = createElement("div", "carousel__trigger");
    const triggerLeft = createElement("div", "carousel__trigger__left");
    const triggerRight = createElement("div", "carousel__trigger__right");
    const triggerPointContainer = createElement(
      "ul",
      "carousel__trigger__points"
    );

    // 根据传入的数组来创建小点列表和轮播列表
    for (let i = 0; i < imgUrlArray.length; i++) {
      const div = createElement("div", "carousel__item");
      // 这里使用了传入的render函数来生成节点的内容
      const content = this.__render(imgUrlArray[i], i);
      div.innerHTML = content;
      container.append(div);
      triggerPointContainer.append(
        createElement("li", "carousel__trigger__point__item")
      );
    }

    // 插入对应父节点下面
    triggers.append(triggerLeft);
    triggers.append(triggerRight);
    triggers.append(triggerPointContainer);

    root.append(container);
    root.append(triggers);

    // 把常用的节点挂载到this上，方便之后调用
    this.__triggerPointElements = triggerPointContainer.children;
    this.__imgContainer = container;
    this.__imgElements = container.children;
    this.__triggerLeftBtnElement = triggerLeft;
    this.__triggerRightBtnElement = triggerRight;
  }
}

class Carousel {
  // 给小点和左右按钮定义点击事件
  bindTriggerEvent() {
    const {
      __triggerLeftBtnElement,
      __triggerRightBtnElement,
      __triggerPointElements,
    } = this;
    __triggerLeftBtnElement.addEventListener("click", () => {
      // 如果已经是第一张，那么不能再继续上一张了，直接返回
      if (this.__curIndex === 0) {
        return;
      }
      this.callWithStyleUpdate(() => {
        this.__curIndex--;
      });
    });
    __triggerRightBtnElement.addEventListener("click", () => {
      // 如果是最后一张，那么不能再继续上一张，直接返回
      if (this.__curIndex === this.imgUrlArray.length - 1) {
        return;
      }
      this.callWithStyleUpdate(() => {
        this.__curIndex++;
      });
    });
    for (let i = 0; i < __triggerPointElements.length; i++) {
      __triggerPointElements[i].addEventListener("click", () => {
        this.callWithStyleUpdate(() => {
          this.__curIndex = i;
        });
      });
    }
  }
}

class Carousel {
  // 定时器的函数
  timerHandler() {
    this.callWithStyleUpdate(() => {
      if (this.__curIndex === 0) {
        // 第一张此时方向往右往左移动，最后一张为左往右移动
        this.__dir = 1;
      } else if (this.__curIndex === this.imgUrlArray.length - 1) {
        this.__dir = -1;
      }
      this.__curIndex += this.__dir;
    });
  }

  // 清除定时器
  clearTimer() {
    if (this.__timer) {
      clearInterval(this.__timer);
      this.__timer = null;
    }
  }

  // 启动定时器来使得可以自动轮播
  startTimer() {
    // 小于等于1张不用设置定时器
    if (this.imgUrlArray.length > 1) {
      // 鼠标进入根节点就清除定时器
      this.__root.addEventListener("mouseenter", this.clearTimer.bind(this));
      // 鼠标离开根节点就设置定时器
      this.__root.addEventListener("mouseleave", () => {
        this.clearTimer();
        this.__timer = setInterval(this.timerHandler.bind(this), this.__ms);
      });
      this.__timer = setInterval(this.timerHandler.bind(this), this.__ms);
    }
  }
}

class Carousel {
  // 真正把轮播图挂载到节点上
  mount() {
    this.mountNode.append(this.__root);
    // 绑定左右按钮和下面小点切换的函数
    this.bindTriggerEvent();
    // 启动计时器
    this.startTimer();
    // 初始化样式
    this.callWithStyleUpdate();
  }

  // 销毁这个轮播图
  destroy() {
    this.clearTimer();
  }
}

// 测试代码
const carousel = new Carousel(["A", "B", "C"], {
  mountNode: document.querySelector("#app"),
  render: (item, index) => {
    return `
      <div style="height: 100%;display: flex;align-items: center;justify-content: center;font-size: 20px">
        ${item}
      </div>
     `;
  },
});
carousel.mount();