为什么这段代码点击箭头不能实现焦点轮播图效果呢？

Question

------------------------------------------------js-------------------------------------------------

window.onload=function(){

var container=document.getElementsByClassName('NewRecommendList');

var list=document.getElementsByClassName('list');

//var buttons=document.getElementsByClassName('buttons');

var prev=document.getElementsByClassName('prev');

var next=document.getElementsByClassName('next');

function animate(offset){

list.style.left=parseInt(list.style.left)+offset+'px';

}

next.onclick=function(){

animate(-240);

}

prev.onclick=function(){

animate(240);

}

}

-----------------------------------------------------------css--------------------------------------
.NewRecommend{position: relative;}
.NewRecommendTitle{
	padding-top: 42px;
	padding-bottom: 22px;
	margin-left: 15px;
}
.NewRecommendTitle h2{
	color: #787878;
	line-height: 18px;
	font-size: 1.5em;
	font-weight: bold;
	width: 960px;
	margin:0 auto;
}
.NewRecommendList{
	height: 274px;
	width: 960px;
	margin:0 auto;
    overflow: hidden;      /*溢出隐藏*/
	position: relative;
}
.list{
	list-style: none;
	position: absolute;
	width: 2880px;
}
.NewRecommendList li{
	float: left;
	margin-right: 4px;
	margin-left: 4px;
	line-height:0;           /*避免img下方空隙出现*/
}
.Detail{
	background-color: #eff0f1;
	font-size: 14px;
	height: 100px;
	color: #595959;
	padding: 14px 40px 15px 15px;
    line-height: 20px;
}
.arrow{
	width: 1100px;
	height: 0;
	margin: 0 auto;
	position: relative;
	bottom: 210px;
}
.prev{padding-right: 990px;}

---------------------------------------------html----------------------------------------------

<div class="NewRecommend">

<div class="NewRecommendTitle">

<h2>

<img src="img/NewRecommendTitle.png">

</h2>

</div>

<div class="NewRecommendList">

<ul class="list" style="left: -240px;">

<li>

<a href="#">

<img src="img/12.png">

<div class="Detail">

<p>

F55/F5 Super 35mm

<br>

4K数字摄影机 惊世绽放

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/1.jpg">

<div class="Detail">

<p>

h.ear 听你的

<br>

你是Hi-Res新声代

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/2.jpg">

<div class="Detail">

<p>

圣斗士星矢 勇斗之魂

<br>

再次燃烧你的小宇宙

<br>

热血登场

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/3.jpg">

<div class="Detail">

<p>

2016年索尼原音对抗赛

<br>

火热开启

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/4.jpg">

<div class="Detail">

<p>

α影像世界，全新启程！

<br>

开启更丰富的摄影体验

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/5.jpg">

<div class="Detail">

<p>

2017 SWPA

<br>

索尼世界摄影大赛

<br>

期待您的参与！

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/6.jpg">

<div class="Detail">

<p>

时光瞬息而变

<br>

FES电子手表

<br>

新品上市

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/7.jpg">

<div class="Detail">

<p>

4K HDR

<br>

新一代显示技术

<br>

了解详情

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/8.jpg">

<div class="Detail">

<p>

索尼超长焦黑卡™RX10 Ⅲ

<br>

超长所见，影像无妥协

<br>

新品发布！

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/9.jpg">

<div class="Detail">

<p>

索尼（中国）官方微信账号

<br>

扫二维码，即刻关注

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/10.jpg">

<div class="Detail">

<p>

索尼中国手机客户端

<br>

Android 3.0版本现已发布

<br>

IOS版本即将发布

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/12.png">

<div class="Detail">

<p>

F55/F5 Super 35mm

<br>

4K数字摄影机 惊世绽放

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/1.jpg">

<div class="Detail">

<p>

h.ear 听你的

<br>

你是Hi-Res新声代

</p>

</div>

</a>

</li>

</ul>

</div>

<div class="arrow">

<img src="img/prev.png" class="prev">

<img src="img/next.png" class="next">

</div>

<div class="buttons"></div>

</div>

Answer 1

var container=document.getElementsByClassName('NewRecommendList')[0]; var list=document.getElementsByClassName('list')[0]; //var buttons=document.getElementsByClassName('buttons')[0]; var prev=document.getElementsByClassName('prev')[0]; var next=document.getElementsByClassName('next')[0];这样就对了