window.onload=function(){
   var con=document.getElementById('con');
   var list=document.getElementById('list');
   var button=document.getElementById('button').getElementsByClassName('span');
   var prev=document.getElementById('prev');
   var next=document.getElementById('next');
   var index=1;

   function showButton(){
       button[index-1].className='on';

   }
   function animate(offset){
       var newleft=parseInt(list.style.left) +offset;
       list.style.left = newleft+ 'px';

       if(newleft>-730){
           list.style.left=-3650+'px';
       }
       if(newleft<-3650){
           list.style.left=-730+'px';
       }
   }
   next.onclick=function() {
       index += 1;
       showButton();
       animate(-730);
   }
   prev.onclick=function() {
       index -= 1;
       showButton();
       animate(730);
   }


}