JavaScript与CSS Flexbox实现高性能多实例轮播图

// DOM 辅助函数，用于简化元素选择和创建
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// 辅助函数：模运算，处理负数索引，实现循环效果
const mod = (n, m) => (n % m + m) % m;

// 轮播图组件函数
const carousel = (elContainer) => {
  // 在当前轮播图容器内查找元素
  const elCarousel = el(".carousel", elContainer); // 包含所有幻灯片的父容器
  const elsSlides = els(".image", elCarousel);    // 所有幻灯片
  let max = elsSlides.length; // 幻灯片总数
  let c = 0; // 当前幻灯片索引，局部变量

  // 动画方法：通过改变父容器的 translateX 来移动幻灯片
  const anim = () => {
    elCarousel.style.transform = `translateX(${-c * 100}%)`;
  };

  // 上一张幻灯片
  const prev = () => {
    c = mod(c - 1, max); // 使用模运算确保索引循环
    anim();
  };

  // 下一张幻灯片
  const next = () => {
    c = mod(c + 1, max); // 使用模运算确保索引循环
    anim();
  };

  // 创建并添加按钮（每个轮播图实例独立拥有按钮）
  const elPrev = elNew("button", {
    className: "btn-carousel btn-carousel-prev",
    innerHTML: "<span>Prev</span>",
    onclick: prev // 绑定局部事件处理函数
  });

  const elNext = elNew("button", {
    className: "btn-carousel btn-carousel-next",
    innerHTML: "<span>Next</span>",
    onclick: next // 绑定局部事件处理函数
  });

  elContainer.append(elPrev, elNext); // 将按钮添加到当前容器

  // 初始化时显示第一张幻灯片
  anim();
};

// 初始化所有轮播图实例
els(".carousel-container").forEach(carousel);

.carousel-container {
  position: relative;
  flex-grow: 1; /* 允许容器根据需要增长 */
  overflow: hidden; /* 隐藏超出容器范围的幻灯片 */
  width: 100%; /* 确保容器宽度 */
  max-width: 800px; /* 示例最大宽度 */
  height: 350px; /* 示例高度 */
}

.carousel {
  display: flex; /* 使用 Flexbox 布局 */
  transition: transform 0.3s ease-in-out; /* 对 transform 属性添加过渡动画 */
  height: 100%; /* 确保高度填充父容器 */
}

.carousel .image {
  flex: 1 0 100%; /* 关键：每张幻灯片占据 100% 宽度，不收缩 */
  height: 100%; /* 确保高度填充父容器 */
}

.carousel .image img {
  display: block; /* 移除图片底部空白 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填充且不失真 */
}

/* 按钮样式保持不变，但要确保它们位于 .carousel-container 内部 */
.carousel-container .btn-carousel {
  position: absolute;
  height: 40px;
  padding: 10px;
  border: none;
  z-index: 10; /* 修正 z-index 为数字 */
  cursor: pointer;
  background-color: #fff;
  font-size: 18px;
  display: block;
}

.carousel-container .btn-carousel-prev {
  top: 45%;
  left: 2%;
}

.carousel-container .btn-carousel-next {
  top: 45%;
  right: 2%;
}

<div class="carousel-container">
  <div class="carousel">
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350/0bf?text=image1" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350/fb0?text=image2" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350/b0f?text=image3" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350/0bf?text=image4" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350/0fb?text=image5" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350/f0b?text=image6" alt=""></div>
  </div>
</div>

<div class="carousel-container">
  <div class="carousel">
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image7" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image8" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image9" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image10" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image11" alt=""></div>
    <div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image12" alt=""></div>
  </div>
</div>