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(){
? ? ? ?for(var i=0; i<button.length;i++){
? ? ? ? ? ?if(button[i].className=='on'){
? ? ? ? ? ? ? ?button[i].className='' ;
? ? ? ? ? ? ? ?break;
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?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() {
? ? ? ?if(index==5){
? ? ? ? ? ?index=1
? ? ? ?}
? ? ? ?else{index +=1}
? ? ? ?index +=1;
? ? ? ?showButton();
? ? ? ?animate(-730);
? ?}
? ?prev.onclick=function() {
? ? ? ?if(index==1){
? ? ? ? ? ?index=5
? ? ? ?}
? ? ? ?else{index -=1}
? ? ? ?index -=1;
? ? ? ?showButton();
? ? ? ?animate(730);
? ?}


}