原生轮播图（下一页切换，附带指示器）

本文链接：https://blog.youkuaiyun.com/m0_57033755/article/details/138492340

这篇文章详细描述了一个使用HTML、CSS和JavaScript构建的无缝轮播图组件，包括DOM选择、样式设置、事件监听以及动画效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是目录结构：

index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>无缝轮播图</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/iconfont.css"/>
  </head>
  <body>
    <div class="carousel-container">
      <div class="carousel-list">
        <div class="carousel-item item-1">1</div>
        <div class="carousel-item item-2">2</div>
        <div class="carousel-item item-3">3</div>
      </div>
      <div class="carousel-arrow carousel-arrow-left">
        <i class="iconfont icon-left"></i>
      </div>
      <div class="carousel-arrow carousel-arrow-right">
        <i class="iconfont icon-right"></i>
      </div>
      <div class="indicator">
        <span class="active"></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

index.js

const doms = {
  carouselList: document.querySelector('.carousel-list'),
  arrowLeft: document.querySelector('.carousel-arrow-left'),
  arrowRight: document.querySelector('.carousel-arrow-right'),
  indicators: document.querySelectorAll('.indicator span'),
};
const count = doms.indicators.length; // 轮播图的数量
let curIndex = 0; // 当前轮播图的索引
function moveTo(index) {
  doms.carouselList.style.transform = `translateX(-${index}00%)`;
  doms.carouselList.style.transition = '.5s';
  // 去掉指示器的选中效果
  var active = document.querySelector('.indicator span.active');
  active.classList.remove('active');
  // 添加选中的指示器
  doms.indicators[index].classList.add('active');
  curIndex = index;
}

doms.indicators.forEach((item, i) => {
  item.onclick = function () {
    moveTo(i);
  };
});

function init() {
  const firstCloned = doms.carouselList.firstElementChild.cloneNode(true);
  const lastCloned = doms.carouselList.lastElementChild.cloneNode(true);
  lastCloned.style.marginLeft = '-100%';
  doms.carouselList.appendChild(firstCloned);
  doms.carouselList.insertBefore(
    lastCloned,
    doms.carouselList.firstElementChild
  );
}

init();

function moveLeft() {
  if (curIndex === 0) {
    doms.carouselList.style.transform = `translateX(-${count}00%)`;
    doms.carouselList.style.transition = 'none';//去掉过渡
    // 强制渲染 / 等待浏览器渲染后再执行，当读取浏览器dom的几何信息会强制回流
    doms.carouselList.clientHeight;
    moveTo(count - 1);
  } else {
    moveTo(curIndex - 1);
  }
}

function moveRight() {
  if (curIndex === count - 1) {
    doms.carouselList.style.transform = `translateX(100%)`;
    doms.carouselList.style.transition = 'none';
    // 强制渲染 / 等待浏览器渲染后再执行
    doms.carouselList.clientHeight;
    moveTo(0);
  } else {
    moveTo(curIndex + 1);
  }
}

doms.arrowLeft.onclick = moveLeft;
doms.arrowRight.onclick = moveRight;

iconfont.css

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1714962297970') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-right:before {
  content: "\e662";
}

.icon-left:before {
  content: "\e663";
}

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.carousel-container {
  width: 500px;
  height: 300px;
  margin: 20px auto;
  position: relative;
  /* overflow: hidden; */
  outline: 10px solid #000;
}
.carousel-list {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  z-index: -1;
}
.carousel-item {
  height: 100%;
  flex: 0 0 100%;
  width: 100%;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
}
.carousel-item.item-1 {
  background: #fb5e56;
}
.carousel-item.item-2 {
  background: #febc2e;
}
.carousel-item.item-3 {
  background: #28c840;
}
.carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-arrow {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.1;
  user-select: none;
  cursor: pointer;
  transition: 0.5s;
}
.carousel-arrow:hover {
  opacity: 0.7;
}
.carousel-arrow .iconfont {
  font-size: 1.5em;
}
.carousel-arrow-right {
  right: 10px;
}
.carousel-arrow-left {
  left: 10px;
}

.indicator {
  position: absolute;
  display: flex;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.indicator span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin: 0 3px;
  cursor: pointer;
}
.indicator span.active {
  border-color: #fff;
  background: #fff;
}

iconfont.ttf 其实就是iconfont的字体文件，里面就是轮播图上一张和下一张的按钮，这边自行设置，文件就不放这里了