var index=0;
var speed=3000;
var byTime;
 
function changeImg(){
  var bigImg=document.getElementById("changeImg");
  var bImgs=bigImg.getElementsByTagName("img");
  var smallImg=document.getElementById("smallImg");
  var sImgs=smallImg.getElementsByTagName("a");
  for(var i=0;i<sImgs.length;i++){
    sImgs[i].onmouseover=function(){
      clearInterval(byTime);
      for(var j=0;j<bImgs.length;j++){
        if(j==this.innerHTML-1){
           bImgs[j].className="on";
        }else{
           bImgs[j].className="";
        }
      }
    };
 
   bImgs[i].onmouseover=function(){
      clearInterval(byTime);
   };
 
   sImgs[i].onmouseout=function(){
      changeImgByTime();
   };
 
   bImgs[i].onmouseout=function(){
       changeImgByTime();
   };
  }
}
 
function changeImg2(){
  var bigImg=document.getElementById("changeImg");
  var bImgs=bigImg.getElementsByTagName("img");
  var smallImg=document.getElementById("smallImg");
  var sImgs=smallImg.getElementsByTagName("a");
  bImgs[index].className="on";
  for(var j=0;j<bImgs.length;j++){
        if(j!=index){
           bImgs[j].className="";
           sImgs[j].style.color="#ccc";
        }else{
           sImgs[j].style.color="red";
        }
  }
  if(index<3){
    index++;
  }else{
    index=0;
  }
}
 
function changeImgByTime(){
  byTime=setInterval(changeImg2,speed);
}
 
function start(){
  changeImg();
  changeImgByTime();
}
 
window.onload=start;