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

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];

这样就对了