Html CSS JS 轮播图

功能：
1.上一页 下一页 点击切换
2.同时底部圆点跟随切换
3.点击圆点切换页面
4.鼠标经过显示上一页 下一页 ，同时停止定时器
5.定时器切换页面
6.防止快速点击

window.addEventListener('DOMContentLoaded', function() {

	var arrowl = document.querySelector('.arrow-l');
	var arrowr = document.querySelector('.arrow-r');
	var focus = document.querySelector('.focus');
	var ol = document.querySelector('ol');
	var ul = focus.querySelector('ul');

	var focusWidth = focus.offsetWidth;
	//大盒子 鼠标经过
	focus.addEventListener('mouseenter', function() {

		arrowl.style.display = 'block';
		arrowr.style.display = 'block';
		clearInterval(timer);
		timer = null;
	})

	focus.addEventListener('mouseleave', function() {

		arrowl.style.display = 'none';
		arrowr.style.display = 'none';
		timer = setInterval(function() {
			arrowr.click();
		}, 2000);

	})
	//总个数
	var count = ul.children.length;
	for (var i = 0; i < count; i++) {
		// count[i].
		var li = document.createElement('li');
		li.setAttribute('index', i);
		li.addEventListener('click', function() {
			var index = this.getAttribute('index');	
			console.log('圆点-'+index);
			
			circle = index;
			num = index;
			
			circleChange()
			animation();
		})

		ol.appendChild(li);
	}
	//默认圆点
	ol.children[0].className = 'current';

	//克隆轮播图最后一张，添加到后面
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);

	arrowl.addEventListener('click', function() {

		if (flag) {
			flag = false;
			// 位移图片
			if (num == 0) {
				num = ul.children.length - 1;
				// console.log("left="+ul.style.left);
				ul.style.left = -num * focusWidth + 'px';

			}
			num--;

			animation();

			circle--;

			if (circle < 0) {
				circle = ol.children.length - 1;
			}
			circleChange();
		}
	})
	var num = 0;
	var circle = 0;
	arrowr.addEventListener('click', function() {
		if (flag) {
			flag = false;
			if (num == ul.children.length - 1) {
				ul.style.left = 0 + "px";
				num = 0;
			}
			// 位移图片
			num++;
			console.log('width=' + focusWidth);

			animation();

			//排他思想处理小圆点
			circle++;
			if (circle == ol.children.length) {
				circle = 0;
			}
			circleChange();
		}
	})

	var timer = setInterval(function() {

		arrowr.click();

	}, 2000);

	var flag = true;

	function animation() {

		animate(ul, -num * focusWidth, function() {
			flag = true;
		});
	}

	/**
	 * 小圆点 
	 */
	function circleChange() {
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';
	}


})

* {
	margin: 0;
	padding: 0;
}

.w {
	margin: 0 auto;
}

li {
	list-style: none;
	 
}

.arrow-l,
.arrow-r {
	position: absolute;
	/* 上层显示 */
	z-index: 2;
}

.arrow-l {
	left: 0;
	top: 50%;
	margin-left: 10px;
}

.arrow-r {
	right: 0;
	top: 50%;
	margin-right: 10px;
}

.focus {
	width: 721px;
	height: 455px;
	position: relative;
	background-color: pink;
	 overflow: hidden; 
}

.focus ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 600%;
}
.focus ul li{
	
	float: left;
}

.circle {
	position: absolute;
	left: 1.875rem;
	bottom: 50px;
	 
	/* background-color: yellow; */

}

.circle li {
	margin: 0 3px;
	border-radius: 50%;
	color: white;
	float: left;
	width: 8px;
	height: 8px;
	border: 0.125rem solid rgba(255, 255, 255, .5);
}

.current {
	background-color: white;
}