如何用jquery制作轮播图

文件大体分布：

其中css下为banner.css文件、js文件夹下为banner.js和jquery.js文件、images为3张图片（1.png\2.png\3.png）

banner.html文件代码如下：

banner.css文件代码如下：

*{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.banner{
	width: 1200px;
	height: 400px;
	margin: 10px auto;
	overflow: hidden;
	position: relative;
}

.banner-img{
	width: 1200px;
	height: 400px;
	display: flex;
	
	position: absolute;
	top: 0;
	left: 0;
}

.banner-img li{
	width: 1200px;
	height: 400px;
}

.banner-dot{
	width: 150px;
	height: 15px;
	display: flex;
	position: absolute;

	bottom:10%;
	left: 44.5%;

}

.banner-dot li{
	width: 10px;
	height: 10px;
	background: #999;
	border: 1px solid #666;
	margin: 10px 0px 15px 20px;
	border-radius:50px;
	cursor: pointer;
}
.banner-dot li.hover{
  background: #fff;
}

banner.js文件代码如下：

(()=>{
	var liwidth=1200;
	var moved=0;
	var $ul=$(".banner-img");
	var $dot=$(".banner-dot");
	function banner(){
		moved+=1;
		$ul.animate({left:-moved*liwidth},
			500,()=>{
				if (moved==3) {
					$ul.css("left",0);
					moved=0;
				}
				$dot.children(":eq("+moved+")").addClass("hover").siblings().removeClass("hover");
			})
	}

	var timer=setInterval(banner,3500);
	$dot.hover(
		()=>{clearInterval(timer);timer="";},
		()=>{timer=setInterval(banner,3500);}
	);

	$dot.on("mouseover","li",function(){
		var $li=$(this);
		var i=$li.index();
		var moved=i;
		$ul.stop(false).animate({left:-moved*liwidth},
			500,()=>{
				$dot.children(":eq("+i+")").addClass("hover").siblings().removeClass("hover");
			});
	})
	
})()

再加上常用jquery.js文件

效果图如下：