jquery无缝轮播多图切换

实现功能

利用移动定位进行无缝滚动，大体实现点击切换图片，每张图片对应一个小圆点，并且小圆点点击可以进行切换。鼠标移入停止图片轮播。

基本步骤分析如下：

（1）全局由index贯穿。

（2）动画中的回调函数。

（3）flag标识，进行判断动画在执行中还是执行结束。

（4）对于图片切换到第一张还是最后一张的处理。

html:

		<div class="banner">
			<!-- ul>li*6>img[src="./img/$.jpg"] -->
			<ul>
				<li><img src="./img/1.jpg" alt=""></li>
				<li><img src="./img/2.jpg" alt=""></li>
				<li><img src="./img/3.jpg" alt=""></li>
				<li><img src="./img/4.jpg" alt=""></li>
				<li><img src="./img/5.jpg" alt=""></li>
				<li><img src="./img/6.jpg" alt=""></li>
			</ul>
			<button class="iconfont left">&#xe60d;</button>
			<button class="iconfont right">&#xe658;</button>
			<ol></ol>
		</div>

css：

*{
	margin: 0;
	padding: 0;
}
html,body{
	height: 100%;
	overflow: hidden;
}
.banner{
	width: 794px;
	height: 476px;
	margin: 50px auto;
	position: relative;
	overflow: hidden;
	box-shadow: 2px 2px 15px #333;
}
ul{
	height: 100%;
	position: absolute;
	display: flex;
}
ol,ul,li{
	list-style: none;
}
li{
	width: 794px;
	height: 100%;
	flex-shrink: 0;
}
li>img{
	width: 100%;
	height: 100%;
}
button{
	width: 70px;
	height: 50px;
	opacity: 1;
	border: none;
	cursor: pointer;
	background-color: rgba(0,0,0,0.2);
	border-radius: 0 5px 5px 0;
	color: #f5f5f5;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: all 1s;
}
.banner:hover button{
	opacity: 1;
}
button:hover{
	background-color: rgba(0,0,0,0.5);
}
.left{
	border-radius: 0 5px 5px 0;
	left: 0;
}
.right{
	border-radius: 5px 0 0 5px;
	right: 0;
}
.banner ol{
	width: 120px;
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
}
.banner ol li{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
}
.active{
	width: 25px;
	border-radius: 5px;
	transition: width 1s;
}