jquery实现点击左右按钮的切换单个元素

html部分代码

 <div class="box">
			<div class="box_wheel">
				<ul class="box_ul">
					<li style="background: pink;">AAA</li>
					<li style="background: red;">BBB</li>
					<li style="background: orange;">CCC</li>
					<li style="background: brown;">DDD</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;}
			.box{width: 800px;height: 300px;border: 1px solid red;margin: 80px auto;position: relative;}
			.box_wheel{width: 800px;height: 300px;overflow: hidden;}
			.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: -60px;top: 50%;margin-top: -30px;}
			.btn_right{position: absolute;right: -60px;top: 50%;margin-top: -30px;}
			.box_ul{height: 300px;}
			.box_ul li{width:260px;height: 300px;margin-right: 10px;float: left;line-height: 300px;text-align: center;}

js部分代码

<script type="text/javascript">
			//li元素的宽（包括padding，margin，border）
			var liW = $('.box_ul li').outerWidth(true)
			var len = $('.box_ul li').length
			$('.box_ul').css("width",liW*len)
			var flag = true
			$(".btn_left").click(function(){
				if(flag){
					flag = false
					$('.box_ul').find("li").eq(len-1).prependTo($('.box_ul'))
					$('.box_ul').css({"marginLeft":-liW}).delay(8).queue(function(){
						$('.box_ul').animate({"marginLeft":0})
						flag = true
						$(this).dequeue();
					})
				}
			})
			
			$(".btn_right").click(function(){
				if(flag){
					flag = false
					$('.box_ul').animate({"marginLeft":-liW}).delay(8).queue(function(){
						$('.box_ul').find("li").eq(0).appendTo($('.box_ul'))
						$('.box_ul').css({"marginLeft":0})
						flag = true
						$(this).dequeue();
					})
				}
			})
</script>