jquery左右滑动

要求是点击左右滑动，每次切换一个格子

思路:将格子放在一个盒子里面，这个盒子左右每次左右移动

css代码：

			.box{
				display: -webkit-flex;
				display: flex;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				width: 100%;
				height: 50px;
				position: relative;
			}
			.triangle{
				width: 0;
				height: 0;
				border: 25px solid transparent;
			}
			.right{
				border-right: 25px solid black;
			}
			.left{
				border-left: 25px solid black;
			}
			.border{
				width: 50px;
				height: 50px;
			}
			.content{
				width: 240px;
				height: 50px;
				overflow: hidden;
				position: relative;
			}
			.contentBox{
				width: 800px;
				height: 50px;
				position: absolute;
			}
			.contentBox span{
				width: 80px;
				height: 50px;
				display: block;
				float: left;
				text-align: center;
				line-height: 50px;
			}

javascript代码：

//设置一个变量，当做起始值
var leftBox=0
			//左边点击事件
			$('.right').click(function(e){
			//设置，每次点击向左拉80px的值
				leftBox+=80
				//当值等于80，意味已经底部了，提示用户
				if(leftBox==80){
					leftBox=0
					alert("已经是左边到底了")
					return
				}
				//每次使用动画，每次左拉需要用时一秒
				$(".content .contentBox").animate({left:""+leftBox+"px"},1000,function(){});
			});
			$('.left').click(function(e){
				leftBox-=80
				if(leftBox==-640){
					leftBox=-560
					alert("已经是右边到底了")
					return
				}
				$(".content .contentBox").animate({left:""+leftBox+"px"},1000,function(){});
			});

html代码：

<div class="box">
			
			<div class="border">
				<div class="right triangle"></div>
			</div>
			<div class="content">
				<div class="contentBox">
					<span>王者1</span>
					<span>王者2</span>
					<span>王者3</span>
					<span>王者4</span>
					<span>王者5</span>
					<span>王者6</span>
					<span>王者7</span>
					<span>王者8</span>
					<span>王者9</span>
					<span>王者10</span>
				</div>
			</div>
			<div class="border">
				<div class="left triangle"></div>
			</div>
		</div>