下面是目录结构：
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的字体文件，里面就是轮播图上一张和下一张的按钮，这边自行设置，文件就不放这里了
