jquery实现点击左右箭头切换

html部分

  <div class="contain">
			<div class="box">
				<ul class="box_wheel">
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</div>
			<div class="btn btn_left"><</div>
			<div class="btn btn_right">></div>
		</div>		

css部分

  *{padding: 0;margin: 0;}
		li{list-style: none;}
		.contain{width: 1080px;height: 500px;background: red;margin: 80px auto;position: relative;}
		.box{width: 1040px;height: 500px;margin: 0 20px;position: relative;overflow: hidden;}
		.box_wheel{height: 500px;position: absolute;overflow: hidden;}
		.box_wheel li{width: 1040px;height: 500px;background: pink;text-align: center;line-height: 500px;float: left;}
		.btn{width: 50px;height: 60px;background: bisque;line-height: 60px;text-align: center;color: red;font-size: 30px;cursor: pointer;}
		.btn_left{position: absolute;left: -50px;top: 50%;margin-top: -30px;}
		.btn_right{position: absolute;right: -50px;top: 50%;margin-top: -30px;}

js部分

<script type="text/javascript">
//			获取每个li元素的宽度
			var liW = $(".box_wheel li").width()
//			获取li元素的长度(个数)
			var len = $(".box_wheel li").length
//			计算ul的总宽度
			var ulW = len*liW
//			设置ul的宽度
			$(".box_wheel").css("width",ulW)
			var index = 0 
			$(".btn_left").click(()=>{
				index --  //索引自加
				if(index == -1){//判断如果索引为-1了，就让它为最后一个li元素的索引
					index = len - 1
				}
				showLi(index)
			})
			$(".btn_right").click(()=>{
				index ++  //索引自减
				if(index == len){//判断如果索引超过长度了，就让它为第一个li元素的索引
					index = 0
				}
				showLi(index)
			})
			
			function showLi(index){
				var move = -index * liW 
				$(".box_wheel").stop().animate({"left":move},300)
			}
</script>