无需依赖库，从零开始使用原生js实现无限循环轮播组件

前端

2023-09-10 23:08:24

打造无限循环轮播图：原生 JavaScript 实现指南

**子
准备打造一个功能强大的无限循环轮播图组件？使用原生 JavaScript，你可以轻松实现。本文将深入探讨实现过程，分解每个步骤，并提供一个完整的代码示例，帮助你从头开始构建自己的轮播图。

**子
轮播图由父容器和多个子元素（轮播项）组成。父容器容纳子元素，而子元素展示轮播内容。使用 DOM 库（如 QNode）创建 HTML 结构：

建立一个父容器
，为其指定类名 "carousel"。
使用循环，为每个轮播项创建一个
，并将其类名设为 "item"。

**子
为轮播图设置样式，使其美观且符合预期：

为父容器设置宽度、高度和溢出隐藏。
将轮播项设置为浮动、宽度和高度 100%。

**子
利用 JavaScript，实现无限循环轮播：

声明一个 index 变量，表示当前轮播项索引。
设置一个 setInterval() 函数，每 3 秒触发一次。
在函数中，递增 index，如果达到轮播项末尾，则重置为 0。
更新轮播项的 left 样式，实现平滑过渡。

**子
让轮播图更具交互性，支持鼠标悬停暂停和继续：

为父容器添加 mouseenter 和 mouseleave 事件监听器。
在 mouseenter 事件中，清除 setInterval()，暂停轮播。
在 mouseleave 事件中，重新启动 setInterval()，继续轮播。

**子

const qnode = require("./qnode");

// HTML 结构
const container = qnode("div").addClass("carousel");
const items = [
  qnode("div").addClass("item").html("Item 1"),
  qnode("div").addClass("item").html("Item 2"),
  qnode("div").addClass("item").html("Item 3")
];
items.forEach(item => container.append(item));

// CSS 样式
container.css({
  width: "100%",
  height: "100%",
  overflow: "hidden"
});
items.forEach(item => item.css({
  float: "left",
  width: "100%",
  height: "100%"
}));

// 轮播逻辑
let index = 0;
let timer = setInterval(() => {
  index++;
  if (index >= items.length) {
    index = 0;
  }

  items.forEach(item => item.css({
    left: `${-100 * index}%`
  }));
}, 3000);

// 交互性
container.on("mouseenter", () => {
  clearInterval(timer);
}).on("mouseleave", () => {
  timer = setInterval(() => {
    index++;
    if (index >= items.length) {
      index = 0;
    }

    items.forEach(item => item.css({
      left: `${-100 * index}%`
    }));
  }, 3000);
});