window.onload=function() {
var oBox1=document.getElementById("box1");
var oImgs=document.getElementById("imgs");
var oLeft=document.getElementById("left");
var oRight=document.getElementById("right");
var oLiArr=document.getElementsByTagName("li");
var num=1;
oLiArr[0].style.backgroundColor="red";
var timer=setInterval(run1, 2000);
function run1(){
num++;
accoord()
}
function accoord(){
if(num==9){
num=1;
} else if(num==0){
num=8;
}
oImgs.src="img/faa/"+num+".jpg";
for(var i=0;i <oLiArr.length; i++){
oLiArr[i].style.backgroundColor="gray";
}
oLiArr[num-1].style.backgroundColor="red";
}
oBox1.addEventListener("mouseover", stopFunc, false);
function stopFunc(){
clearInterval(timer);
oLeft.style.display="block";
oRight.style.display="block";
}
oBox1.addEventListener("mouseout", startFunc, false);
function startFunc(){
timer=setInterval(run1, 2000);
oLeft.style.display="none";
oRight.style.display="none";
}
oLeft.addEventListener("mouseover", pageFunc, false);
oRight.addEventListener("mouseover", pageFunc, false);
function pageFunc(){
clearInterval(timer);
this.style.backgroundColor="rgba(0,0,0,0.6)";
}
oLeft.addEventListener("mouseout", noPageFunc, false);
oRight.addEventListener("mouseout", noPageFunc, false);
function noPageFunc(){
this.style.backgroundColor="rgba(0,0,0,0.2)";
}
oLeft.addEventListener("click", function(){
num--;
accoord();
}, false);
oRight.addEventListener("click", function(){
num++;
accoord();
}, false);
for (var i=0; i< oLiArr.length; i++){
oLiArr[i].index=i+1;
oLiArr[i].addEventListener("mouseover", function(){
clearInterval(timer);
num=this.index;
accoord();
}, false);
}
}