Carousel js code detailed explanatory notes

<script>

// JavaScript Document 

var timer; 

var IdNow=0;

window.onload=function(){ //页面加载就运行Start()函数

Start(); 

} 



function Start(){	定义Start函数

Change(); //先调用一次Change函数

Timer(); //调用Timer()

document.getElementById("header").onmouseover=function(){	//当鼠标放在ID为header的元素上时停止定时任务

window.clearInterval(timer);

} 

document.getElementById("header").onmouseout=function(){	//当鼠标移开时执行Timer函数

Timer();

}

var heads=document.getElementsByTagName("li");	//获取所有li元素

heads[0].onclick=function(){ ClickChange(0);}	//点击第一个li显示第一个元素

heads[1].onclick=function(){ ClickChange(1);}	//点击第二个li显示第二个元素 下同

heads[2].onclick=function(){ ClickChange(2);} 

heads[3].onclick=function(){ ClickChange(3);}

heads[4].onclick=function(){ ClickChange(4);}

} 



function Timer(){ //定义Timer函数，内容是每隔3秒，执行一次Change()函数

timer=window.setInterval(function(){

Change();

},3000); 

} 

function Change(){ //定义Change函数

var imgs=document.getElementsByClassName("image");	//获取所有Class="image"的元素

var heads=document.getElementsByTagName("li");	//获取所有li元素

for(var i=0;i<imgs.length;i++){	//循环Class="image"的元素

imgs[i].style.display="none";	//隐藏Class="image"的元素

heads[i].style.background="#FFF";	//li元素背景设置为白色

}

if(IdNow==5) IdNow=0;	//如果到最后一个元素了，返回到第一个

document.getElementById(IdNow).style.display="block";	//显示第IdNow个元素

heads[IdNow].style.background="#ffcc00";//为第IdNow个li元素设置背景色

IdNow++; //执行一次Change函数，IdNow就加1

} 



function ClickChange(position){	//定义ClickChange函数，带参数position，函数内容和上面的原因，不同的就是参数position，如果上面的ClickChange(0)这样调用这个函数，position就的等于0。

IdNow=position; 

var imgs=document.getElementsByClassName("image");

var heads=document.getElementsByTagName("li");

for(var i=0;i<imgs.length;i++){

imgs[i].style.display="none";

heads[i].style.background="#FFF";

}

document.getElementById(position).style.display="block";

heads[position].style.background="#ffcc00";

}

</script>