<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>
轮播js代码详细注释说明
最新推荐文章于 2022-07-06 11:17:33 发布