无限滚动实现不了

html布局：

<div class="contact">
 <div class="contact-detail">
   <h3 class="sub-title">企业协作更高效</h3>
   <div id="contact-ways">
     <div class="contact-div">
       <span class="contact-span">
         <!--<span class="contact-radio"></span>-->
         管理碎片化商务，避免信息分散
       </span>
     </div>
     <div class="contact-div">
       <span>
         <!--<span class="contact-radio"></span>-->
         连结商务链条，避免信息断层
       </span>
     </div>
     <div class="contact-div">
       <span>
         <!--<span class="contact-radio"></span>-->
         实时内容交互，提高协作效率
       </span>
     </div>
   </div>
 </div>
 <div id="wrap">
   <div id="carousel" style="left: 0;">
     <img src="../sprite/picture_1.png">
     <img src="../sprite/picture_02.png">
     <img src="../sprite/picture_04_04.png">
   </div>
   <a href="javascript:;" class="arrow" id="prev"></a>
   <a href="javascript:;" class="arrow" id="next"></a>
 </div>
</div>

css:

.contact {
 background-color: #f6f5f5;
 margin: 86px 0 86px 0;
 padding: 70px 0 86px 0;
}
.contact-detail {
 display: inline;
 width: 45%;
 text-align: center;
 margin-left: 0;
 margin-right: 170px;
 margin-top: 164px;
 float: left;
}
.contact-ways {
 margin: 0 auto;
}
.contact-div {
 padding: 10px 0 10px 210px;
 text-align: left
}
#wrap {
 width: 600px;
 min-height:400px;
 margin-right: 0;
 position: relative;
 overflow: hidden;//隐藏超出的内容
}
#carousel {
 position: absolute;//定位图片
 /*width: 1800px;*/
 min-height:400px;
 z-index: 1;
}
#carousel img {
 float: left;
 width: 600px;
 height: 400px;
}
.arrow {
 cursor: pointer;
 display: none;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 width: 40px;
 height: 40px;
 position: absolute;
 z-index: 2;
 top: 180px;
 background-color: rgba(0,0,0,.3);
 color: #fff;
}
.arrow:hover {
 background-color: rgba(0,0,0,.7);
}
#wrap:hover .arrow {
 display: block;
}
#prev {
 left: 20px;
}
#next {
 right: 20px;
}
.contact-span {
 color: red;
 font-size: 24px;
 line-height: 150%;
}

js:

<script>
 window.onload = function () {
   var wrap = document.getElementById('wrap');
   var carousel = document.getElementById('carousel');
   var spans = document.getElementById('contact-ways').getElementsByTagName('span');
   var prev = document.getElementById('prev');
   var next = document.getElementById('next');
   var index = 1;

   function showSpans () {
     for (var i = 0; i < spans.length; i ++) {
       if (spans[i].className == 'contact-span') {
         spans[i].className = '';
         break;
       }
     }
     spans[index - 1].className = 'contact-span'
   }

   function animate(offset) {
     var newLeft = parseInt(carousel.style.left) + offset;
     if(newLeft > 0) {
       newLeft = -1200 + 'px';
     }
     if(newLeft < -1200) {
       newLeft = 0;
     }
     carousel.style.left = newLeft + 'px';
   }
   next.onclick = function () {
     if (index == 3) {
       index = 1
     } else {
       index += 1;
     }
     showSpans();
     animate(-600);
   };
   prev.onclick= function () {
     if (index == 1) {
       index = 3
     } else {
       index -= 1;
     }
     showSpans();
     animate(600)
   };
 }
</script>

点击next是可以无限滚动，但是点击prev就不行，还请大神帮我看看问题出在哪，我找了好多遍了，没发现问题。