2019-04-11 图片轮播js

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();

    }
  }