JS按钮控制内容左右滚动

CSS部分：

*{ padding: 0; margin: 0;}
	li{ list-style: none;}
	.clearfix{ *zoom:1;}
	.clearfix:after{ clear: both; display: block; content: ""; height: 0; overflow: hidden;}
	a{ text-decoration: none; color: #333;}
	a:hover{ color: #f00;}
	.center{ text-align: center; margin-top: 20px; font-family: "Microsoft Yahei";}
	#box{ width: 700px; margin: 20px auto; border: 1px solid #ccc; background: #fff; font-size: 12px; position: relative; height: 120px;}
	#left ,#right{ position: absolute; z-index: 2px; cursor: pointer; background: #eee; width: 20px; text-align: center; height: 100%; line-height: 2.4; }
	#left{ left: 0;}
	#right{ right: 0;}
	.content{ margin-left: 20px; width: 660px; height: 120px; overflow: hidden; position: relative; background: #ccc;}
	#wrap{ position: absolute; left: 0; width: 1500px;}
	#wrap ul{ padding: 10px 0;}
	#wrap li{ float: left; width: 120px; height: 100px; background: purple; margin-left: 10p