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

圆点事件

功能：遍历所有的圆点，都绑定相应的点击事件，点击圆点更改图片

var dots=byId("dots").getElementsByTagName
  for(var d=0;d