HTML结构是
image.png
首先封装一下getElementById
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
定时器的设置
功能，鼠标离开main块，会触发定时器
var timer=null;
var index=0,
pics=byId("banner").getElementsByTagName("div");
len=pics.length;
main.onmouseout=function(){
//每2秒执行一次代码
timer=setInterval(function(){
index++;
if(index>=len)
{
index=0;
}
},2000)
}
main.onmouseout();//自动在main上触发鼠标离开的事件
功能，鼠标移动到main块上，清除定时器
main.onmouseover = function(){
if(timer)
clearInterval(timer);
}
图片的自动轮播
一开始所有的图片都重叠在一个位置，要使其随着时间的变化，图片跟着循环显示与隐藏
在定时器的基础上加以修改
var timer=null;
var index=0,
pics=byId("banner").getElementsByTagName("div");
len=pics.length;
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>=len)
{
index=0;
}
// 轮播图片
changImg();
},2000)
}
function changImg(){
for(var i=0;i<len;i++)
{
pics[i].style.display="none";
}
pics[index].style.display='block';
}
圆点事件
功能：遍历所有的圆点，都绑定相应的点击事件，点击圆点更改图片
var dots=byId("dots").getElementsByTagName
for(var d=0;d<len;d++)
{
//给所有span添加一个id的属性，值为d，作为当前span的索引
dots[d].id=d;
dots[d].onclick = function (){
//改变index为当前span的id值
index=this.id;
//调用changeImg，实现切换图片
changeImg();
}
}
