                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /焦点图轮播特效

为什么"left:-600"要写在标签<div id="list" style="left: -600px;">里面，写在css里面点击左划右划没有效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<style type="text/css">
*{padding:0;margin: 0;}
body{padding: 50px;}
#container{width:600px;height:400px;border: 3px solid #333;position:relative;overflow:hidden;}
#list{width:4200px;height: 400px;position:absolute;}
#list img{float: left;width:600px;height:400px;}
#buttons{width:100px;height:10px;position:absolute;bottom:20px;left:250px;}
#buttons span{float:left;width:10px;height:10px;border: 1px solid #fff;border-radius:50%;background:#333;margin-right: 5px;cursor:pointer;}
#buttons .on{background:#f60;}
.arrow{z-index:99;position:absolute;top:180px;width:40px;height: 40px;font-size:36px;font-weight:bold;text-align:center;color:#fff;background-color: rgba(0,0,0,0.3);cursor: pointer;display: none;}
#container:hover .arrow{display:block;}
.arrow:hover{background-color: rgba(0,0,0,0.7);}
#prev{left:20px;}
#next{right:20px;}


</style>

</head>
<body>
  <div id='container'>
    <div id='list' style='left:-600px;'>
      <img src="image/5.jpg">
      <img src="image/1.jpg">
      <img src="image/2.jpg">
      <img src="image/3.jpg">
      <img src="image/4.jpg">
      <img src="image/5.jpg">
      <img src="image/1.jpg">
    </div>
    <div id='buttons'>
      <span index='1' class='on'></span>
      <span index='1'></span>
      <span index='1'></span>
      <span index='1'></span>
      <span index='1'></span>
    </div>
    <div id='prev' class='arrow'>&lt</div>
    <div id='next' class='arrow'>&gt</div>
  </div>

<!-- <script type="text/javascript" src='jquery-3.1.1.min.js'></script> -->
<script type="text/javascript">
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('list').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate(offset){
  var newLeft=parseInt(list.style.left)+offset;
  list.style.left=newLeft+'px';
  if(newLeft>-600){
    list.style.left=-3000+'px';
  }else if(newLeft<-3000){
    list.style.left=-600+'px';
  }
}
prev.onclick=function(){
  animate(600);
}
next.onclick=function(){
  animate(-600);
}


</script>
</body>
</html>