jquery轮播图

效果图如下:

HTML部分:

<div class="main">
		<div class="view">
			<ul class="imageBox">
				<li><img src="../images/0.jpg"></li>
				<li><img src="../images/1.jpg"></li>
				<li><img src="../images/2.jpg"></li>
				<li><img src="../images/3.jpg"></li>
			</ul>
			<div class="btn">
				<div class="prev"></div>
				<div class="next"></div>
			</div>
		</div>
		<ul class="imgIcon">
			<li><img src="../images/0.jpg"></li>
			<li><img src="../images/1.jpg"></li>
			<li><img src="../images/2.jpg"></li>
			<li style="margin-right: 0"><img src="../images/3.jpg"></li>
		</ul>

js部分:

$(function(){
			let $imageBox=$(".imageBox"),
				$btn=$(".btn"),
				imgWidth=$(".imageBox img").width(),
				$imgIcon=$(".imgIcon").find("img"),
				$main=$(".main"),
				index=0,
				timer;
			//下方小图样式的改变
			let show=()=>{
				$imgIcon.eq(index).addClass("change").parent("li").siblings().children().removeClass("change");
			}
			//动画
			let animate=(num1)=>{
				if(!$imageBox.is(":animated")){
					//将index=index+num1写在animate方法中是防止快速连续点击按钮引发错误
					index=index+num1;
					let Left=`${-index*imgWidth}px`;
					$imageBox.animate({
						left:Left
					});
					show();
				}
			}
			//自动播放轮播图
			let auto=()=>{
				timer=setInterval(function(){
					$btn.find(".next").trigger("click");
				},2000);
			}
			//改变下方第一张小图片的样式
			$imgIcon.eq(0).addClass("change");
			//右方按钮
			$btn.find(".next").click(function(){
				if (index==3) {
					index=-1;
				}
				animate(1);
			});
			//左方按钮
			$btn.find(".prev").click(function(){
				if (index==0) {
					index=4;
				}
				animate(-1);
			});
			//下方小图的点击
			$imgIcon.click(function(){
				index=$(this).parent("li").index();
				animate(0);
			});
			auto();
			//移入停止自动轮播,移出开始轮播
			$main.hover(function(){
				clearInterval(timer);
			},function(){
				auto();
			});
		})