关于轮播图的学习与实现

HTML部分代码

<div class="wrap">
		<ul class="list">
			<li class="item active">0</li>
			<li class="item">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
		</ul>
		<ul class="pointlist">
			<li class="point active"></li>
			<li class="point"></li>
			<li class="point"></li>
			<li class="point"></li>
			<li class="point"></li>
		</ul>
		<button class="btn" id="goPre"><</button>
		<button class="btn" id="goNext">></button>
	</div>

css部分代码

.wrap{
			position: relative;
			width: 1000px;
			height: 500px;
		}
		.list{
			list-style: none;
			width: 1000px;
			height: 500px;
			position: relative;
			padding-left: 0; 
		}
		.item{
			width: 100%;
			height: 100%;
			color: white;
			font-size: 50px;
			position: absolute;
			opacity: 0;
			transition: all 0.5s;
		}
		.item:nth-child(1){
			background-color: black;
		}
		.item:nth-child(2){
			background-color: red;
		}
		.item:nth-child(3){
			background-color: green;
		}
		.item:nth-child(4){
			background-color: pink;
		}
		.item:nth-child(5){
			background-color: orange;
		}
		.btn{
			width: 40px;
			height: 200px;
			position: absolute;
			top: 150px;
			z-index: 6;
			background-color: rgba(175,238,238,0.5);
			border: none;
			border-radius: 20px;
		}
		.btn:hover{
			opacity: 0.5;
		}
		#goPre{
			left: 0;
		}
		#goNext{
			right: 0;
		}
		/*点击后的样式*/
		.item.active{
			z-index: 5;
			opacity: 1;
		}
		.pointlist{
			padding-left:0;
			list-style: none; 
			position: absolute;
			right: 20px;
			bottom: 20px;
			z-index: 7;
		}
		.point{
			width: 8px;
			height: 8px;
			border-radius: 4px;
			float: left;
			margin-right: 14px;
			background-color: white;
			cursor: pointer;
		}
		/*点击后的样式*/
		.point.active{
			background-color: gray;
		}

js代码

//得到图片、按钮、和小导航
	let items = document.getElementsByClassName('item');
	let goPre = document.getElementById('goPre');
	let goNext = document.getElementById('goNext');
	let points = document.getElementsByClassName('point');
	//设置初始位置为0
	let index = 0;
	//把不是当前显示的图片去除active样式
	let clearActive = function () {
		for (var i = 0; i < items.length; i++) {
			items[i].className = 'item';
			points[i].className = 'point';
		}
	}
	//把当前显示的图片增加active样式
	let goIndex = function () {
		clearActive();
		items[index].className = 'item active';
		points[index].className = 'point active';
	}
	//下一张
	goNextFun = function () {
		if (index < 4) {
			index++;
		}else{
			index = 0
		}
		goIndex();
	}
	//给下一张按钮增添点击事件
	goNext.addEventListener('click',function () {
		goNextFun();
		clearInterval(inter);
		//停留一段时间后重启定时器
		setTimeout(inter = setInterval(goNextFun,2000),3000)
	})
	//给上一张按钮增添点击事件
	goPre.addEventListener('click',function () {
		if (index == 0) {
			index = 4
		}else{
			index--
		}
		goIndex();
		clearInterval(inter);
		//停留一段时间后重启定时器
		setTimeout(inter = setInterval(goNextFun,2000),3000)
	})
	//给小导航按钮增添点击事件
	for (let i = 0; i < points.length; i++) {
		points[i].addEventListener('click',function () {
			index = i;
			console.log(index);
			goIndex();
			clearInterval(inter);
			//停留一段时间后重启定时器
			setTimeout(inter = setInterval(goNextFun,2000),3000)
		})
	}
	//定时器
	let inter = setInterval(goNextFun,2000)