原生JS实现轮播

原生JS实现轮播

html部分：
			<div class="wrap fl" id="banner-box">
				<ul class="lists" id="lists-move">
					<li class="item active">
						<img src="img/banner1.jpg" class="banner-img"/>
					</li>
					<li class="item">
						<img src="img/banner2.jpg"/ class="banner-img">
					</li>
					<li class="item">
						<img src="img/banner3.jpg"/ class="banner-img">
					</li>
					<li class="item">
						<img src="img/banner4.jpg"/ class="banner-img">
					</li>
					<li class="item">
						<img src="img/banner5.jpg"/ class="banner-img">
					</li>
				</ul>
				<!--小按钮-->
				<ul class="point-lists clearfix">
					<li class="point active" data-index = "0"></li>
					<li class="point" data-index = "1"></li>
					<li class="point" data-index = "2"></li>
					<li class="point" data-index = "3"></li>
					<li class="point" data-index = "4"></li>
				</ul>
				<a class="btn" id="prev"><</a>
				<a class="btn" id="next">></a>
			</div>	

css部分:
.dh-banner .wrap{
	position:relative ;
	width: 700px;
	height: 306px;
	margin-left: 200px;
	/*border: 1px solid red;*/
}
.dh-banner .lists{
	width: 700px;
	height: 306px;
	/*border: 1px solid red;*/
	position: relative;
}
.dh-banner .item{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 2s;
}
/*设置显示哪一张*/
.dh-banner .item.active{
	z-index: 10;
	opacity: 1;
}
.dh-banner .item .banner-img{
	width: 700px;
	height: 306px;
}
/*圆点*/
.point-lists{
	position: absolute;
	right: 20px;
	bottom: 10px;
	z-index: 15;
}
.point{
	width: 12px;
	height: 12px;
	border: 1px solid #E2E2E2;
	border-radius: 50%;
	float: left;
	background: rgb(0,0,0,0.4);
	margin-right: 14px;
}
.point.active{
	background: rgb(255,255,255,0.8);
}
/*左右按钮*/
.dh-banner .btn{
	display: inline-block;
	width: 24px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	background: #666666;
	opacity: .4;
	border: 1px solid #E2E2E2;
	position: absolute;
	top: 50%;
	margin-top: -20px;
    z-index: 11;
}
.dh-banner #prev{
	left: -1;
}
.dh-banner #next{
	right: -1px;
}

js部分：
let items = document.getElementsByClassName('item') //图片
let prev = document.getElementById('prev') 	//按钮
let next = document.getElementById('next')
let points = document.getElementsByClassName('point') //小圆点
let move = document.getElementById("lists-move") 
let time = 0
let index = 0 //index表示第几张图片在展示
//第index张图片就有active类名    //第几个点在展示
let clearActive = function () {
	for (let i = 0; i < items.length; i++) {
		items[i].className = 'item'
	}
	for (let j = 0; j < points.length; j++) {
		points[j].className = 'point'
	}
}
let goIndex = function () {
//	for (let i = 0; i < items.length; i++) {
//		items[i].className = 'item'
//	}
	//把全部的active去掉，为显示的那个添加active
	clearActive()
	items[index].className = 'item active'
	points[index].className = 'point active'
}

//下一张
let nextBtn = function () {
	if (index < 4) {
		index++
	} else {
		index = 0
	}
	goIndex()
}
//上一张
let prevBtn = function () {
	if (index <= 0) {
		index = 4
	} else {
		index--
	}
	goIndex()
}
//为左右按钮添加点击事件
next.addEventListener('click', function () {
	nextBtn()
})
prev.addEventListener('click',function () {
	prevBtn()
})
//点击圆点，显示对应的图片
for (let i = 0; i < points.length; i++) {
	points[i].addEventListener('click', function () {
		let pointIndex = this.getAttribute("data-index")
		index = pointIndex
		goIndex()
	})
}

//定时器,让图片自动轮播
let setIntervalTime = function () {
		timer = setInterval(function(){
			time++
			if(time == 20){
				nextBtn()
				time = 0
			}	
		},100)
	}
setIntervalTime()
move.onmouseenter = function(){
	clearInterval(timer)
}
move.onmouseleave = function () {
	setIntervalTime()
}