为什么我的onclick点击一次改变了left的值以后，第二次就不能触发，继续改变Left的值了呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 20px auto;
}
.img-box{
width: 1000px;
height: 280px;
overflow: hidden;
position: relative;
}
.box-list{
width: 5000px;
height: 280px;
position: absolute;
left: 0px;
z-index: 1;
}
.box-list li{
float: left;
}
.button{
width: 39px;
height: 8px;
position: absolute;
margin: 260px 500px;
z-index: 2;
}
.button span{
width: 6px;
height: 6px;
border:1px solid #fff;
display: inline-block;
border-radius: 6px;
margin-right:3px ;
}
.button span:hover{
background: #fff;
cursor:pointer;
}
.btn{
cursor:pointer;
font-size: 36px;
font-weight: bold;
color: #fff;
display: block;
position: absolute;
z-index: 2;
width: 35px;
height: 40px;
margin-top: 140px;
background: rgba(76,76,76,0.3);
padding-left: 10px;
}
.left-btn{
left: 20px;
}
.right-btn{
right:20px;
}
.left-btn:hover,.right-btn:hover{
background: rgba(76, 76, 76, 0.8);
}
</style>
</head>
<script>
function getId(id){
return document.getElementById(id);
}
window.onload = function(){
var list = getId("list");
var leftBtn = getId("left");
var rightBtn = getId("right");
leftBtn.onclick = function(){
list.style.left = list.style.left -1000+'px';
}
rightBtn.onclick = function(){
list.style.left = list.style.left +1000+'px';
}
}
</script>
<body>
<div class="img-box" id="container">
<ul class="box-list" id="list" >
<li><img src="images/ad4.jpg"></li>
<li><img src="images/ad2.jpg"></li>
<li><img src="images/ad3.jpg"></li>
</ul>
<div class="button" id="btn">
<span index="1"><a href=""></a></span>
<span index="2"><a href=""></a></span>
<span index="3"><a href=""></a></span>
</div>
<a class="left-btn btn" id="left"><</a>
<a class="right-btn btn" id="right">></a>
</div>
</body>
</html>
