原生js 实现轮播图无缝滚动

实现原理

前面加一张最后的图片,最后面加一张原先的第一的图片

html结构

<div class="box">
	<ul class="box-ul">
		<li>5</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>1</li>
	</ul>
</div>
<button type="button">点击</button>

css样式

.box {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
}

.box-ul {
	position: absolute;
	width: 700px;
	margin: 0 auto;
}

.box-ul li {
	float: left;
	width: 100px;
	height: 100px;
	text-align: center;
	font-size: 40px;
	color: bisque;
	line-height: 100px;
}

.box-ul li:nth-child(1) {
	background: red;
}

.box-ul li:nth-child(2) {
	background: yellow;
}

.box-ul li:nth-child(3) {
	background: black;
}

.box-ul li:nth-child(4) {
	background: pink;
}

.box-ul li:nth-child(5) {
	background: darkblue;
}

.box-ul li:nth-child(6) {
	background: red;
}

.box-ul li:nth-child(7) {
	background: yellow;
}

js代码及注释

let boxUl = document.querySelector('.box-ul'); 
let lis = document.querySelector('li');
let timerAll = 400; // 移动一张图所需要的时间
let time = 20; // 每走一步所需要的时间
let set1 = -100;  // 每次走的总距离
let timer = null;  //定义一个变量
let step = set1 / (timerAll / time); //每毫秒所走的距离 
let btn = document.querySelector('button');
boxUl.style.left = -100 + "px";  // 设置刚开始的位置为-100 即为第二张图开始
btn.onclick = function() {  // 点击按钮 开启轮播
	auto();
}
function move() {
	let lastSep = boxUl.offsetLeft + set1;  // 元素最终的位置
	timer = setInterval(function() {
		let left = boxUl.offsetLeft + step; // 元素的偏移量
		if (left == lastSep) {  // 判断元素的偏移量是否和元素的最终位置相等
			clearInterval(timer);
			if (left == -600) {  // 判断是否是最后一张图
				left = -100;  // 如果是最后一张图,立即返回第二张图
			} else if (left == 0) {  // 判断是否是第一张图
				left = -500;   // 如果是,立即返回到第六张图
			}
		}
		boxUl.style.left = left + "px";  // 将偏移量赋给元素的left值
	}, time)  //这里的time 是每一小步移动的时间
}

function auto() {  //  定义一个函数 每隔1秒调用move函数
	setInterval(function() {
		move();
	}, 1000)
}