原生js 轮播图（详解）

github地址：

https://github.com/Changemcfeng/Carousel

Html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rotation chart</title>
</head>
<body>
		<div id="container" class="container">
			<div class="Carausel" id="Carausel">
				<div class="list" id="list">
					<img src="images/a5.jpg" alt="5" height="350px" width="800px" />
					<img src="images/a1.jpg" alt="1" height="350px" width="800px" />
					<img src="images/a2.jpg" alt="2" height="350px" width="800px" />
					<img src="images/a3.jpg" alt="3" height="350px" width="800px" />
					<img src="images/a4.jpg" alt="4" height="350px" width="800px" />
					<img src="images/a5.jpg" alt="5" height="350px" width="800px" />
				</div>
				<div id="buttons" class="buttons">
					<span index="1" class="on button"></span>
					<span index="2" class="button"></span>
					<span index="3" class="button"></span>
					<span index="4" class="button"></span>
					<span index="5" class="button"></span>
				</div>
				<div id="prev" class="lr"></div>
				<div id="next" class="gr"></div>
			</div>

		</div>
    </body>
    </html>

css样式：

<style>
* {
padding: 0;
margin: 0;
}

.container {
display: flex;
justify-content: center;
}

.Carausel {

display: flex;
overflow: hidden;
width: 800px;
margin-top: 1.875rem;
}

.list {
display: flex;
width: 4800px;
height: 350px;

}

.lr {
background-image: url(images/lt.png);
transition-duration: 0.3s;
position: absolute;
background-repeat: no-repeat;
background-size: 30px 37px;
top: 190px;
width: 27px;
height: 44px;
left: 300px;
z-index: 999;
cursor: pointer;
display: none;

}

.lr:hover {
display: block;
}

.gr {
background-image: url(images/gt.png);
background-repeat: no-repeat;
transition-duration: 0.3s;
background-size: 30px 37px;
position: absolute;
top: 190px;
width: 27px;
height: 44px;
left: 1020px;
z-index: 999;
cursor: pointer;
display: none;

}

.gr:hover {
display: block;
}

.list img {
display: block;

}

.button {
width: 12px;
height: 12px;
display: inline-block;
border-radius: 100%;
background: orangered;
opacity: 1;
cursor: pointer;
margin-left: 10px;

}

.buttons {
position: absolute;
left: 626px;
top: 322px;
}

.on {
background: ghostwhite;
}

js代码如下：

<script>
	var lock = true; //锁
	var list = document.getElementById("list"); //图片的位移设置
	var prev = document.getElementById("prev"); //后退
	var next = document.getElementById("next"); //前进
	var span = document.querySelectorAll("#buttons span"); //小圆点
	var carausel = document.getElementById("Carausel"); //轮播图容器
	var fla; //自动轮播的判断标志
	var flag1; //播放下一张图的判断标志
	var flag2; //播放上一张图的判断标志
	var flag3 = false; //设置前进，后退按钮出现的标志
	var flag4 = true;
	var total = 0; //图片移动的当前位置
	var number = 0; //图片的索引
	flag = setInterval(pictruenext, 1000);

	next.onclick = pictruenext; //下一张图
	prev.onclick = pictrueprev; //上一张图

	carausel.onmouseover = function() { //移入轮播图容器
		//停止自动轮播
		flag3 = true;
		clearInterval(flag);//清除定时器
		setNone();//设置当前小圆点的样式
		
		setNone(); //显示前进，后退按钮。
	}

	carausel.onmouseout = function() {
		flag3 = false;
		flag = setInterval(pictruenext, 1500); //开始自动轮播
		setNone(); //隐藏前进，后退按钮
	}

	for (let i = 0; i < 5; i++) {
		span[i].onclick = function() { //设置当前小圆点的样式
			reset(); //重置小圆点样式
			span[i].className = "on button"; //设置当前小圆点的样式
			buttonClick(i); //点击小圆点，跳到相应的图
		}
	}

	function setNone() { //设置前进，后退按钮
		if (flag3 == true) {
			prev.style = "display:block";
			next.style = "display:block";
		} else {
			prev.style = "display:none";
			next.style = "display:none";
		}

	}

	function reset() { //重置小圆点样式
		for (let i = 0; i < 5; i++) {
			span[i].className = "button";
		}

	}

	function setClassName() { //设置当前小圆点样式
		reset();
		span[number].className = "on button";
	}

	function pictruenext() { //下一张图
		if (lock == true) {
			flag1 = setInterval(nextInterval, 5); //下一张图的过渡动画。后判断溢出
		}
	}

	function pictrueprev() { //上一张图
		if (lock == true) {
			overflow2(); //先判断溢出
			flag2 = setInterval(prevInterval, 5);
		}
	}

	function overflow1() { //前进时后判断是否number溢出
		let temp = number;
		if (temp >= 4) {
			number = 0;
			total = 0;
		} else {
			number += 1;
		}
	}

	function overflow2() { //后退时先判断是否number溢出
		let temp = number;
		temp -= 1;
		if (temp < 0) {
			number = 4;
			total = 4000;
		} else {
			number -= 1;
		}
	}

	function buttonClick(index) { //点击小圆点，跳到相应的图
		number = index;
		total = index * 800;
		setValue();
		clearInterval(flag1);
		clearInterval(flag2);
		lock = true;
	}

	function stopInterval1() { //停止前进动画
		total = total - 4;
		overflow1();
		clearInterval(flag1);
		setClassName();
		lock = true;
	}

	function stopInterval2() { //停止后退动画
		total = total - 4;
		clearInterval(flag2);
		setClassName();
		lock = true;
	}

	function nextInterval() { //下一张图的调用的函数
		lock = false;
		let step = 4;
		total += step;
		if (total > ((number + 1) * 800)) {
			stopInterval1();
			return;
		} else {
			setValue();
		}
	}

	function prevInterval() { //上一张图的调用的函数
		lock = false;
		let step = 4;
		total -= step;
		if (total < ((number) * 800)) {
			stopInterval2();
			total -= step;
			return;
		} else {
			setValue();
		}
	}

	function setValue() { //设置图片的偏移量
		let tt = -1 * total + "px";
		list.style.transform = "translateX(" + tt + ")";
	}

收获（源生js）：
第一步：先把html+css 框架搭好。
第二部：js中定义相应变量。
第三部:函数。

1：先写前进函数

写前进函数遇到坑：就是在动画还没结束的时候快速点击前进，会出现图片位移不对。解决办法：创建一个变量var lock=ture；进入动画时lock=flase，进行锁住。结束时再解开。记得溢出处理。

2：后退函数：

后退函数与前进函数差距还是有点大。先是溢出判断，在进行动画，而前进函数则是先进行动画再进行溢出判断，并且溢出判断条件也不相同。

3：小圆变色事件：

每次前进一次，number+1；相当于图片的索引值加一，之后先清除span的class，再将新的class赋给下一个span；

4：点击小圆点事件：

通过number全局变量，进行相应的设置。

5：周期性的调用前进函数；

使用setInterval调用(当如果使用了window.onload()函数中调用前进动画函数，会有bug。)

6：小小的彩蛋：

background-size 用来调整背景图像的尺寸大小（设置了背景图片，未出现图片时，先看页面是否加载，再看这个东西）。

onmouseover 事件（包括其子类）换句话说移动到其子类不会触发此事件，而onmouseleave （不包括其子类) 也就是移动到其子类会触发该事件。

最后也希望大家能给我提点宝贵的意见

原文链接：https://blog.csdn.net/qq_41592652/article/details/84957769