window.onload= function() {
  //封装一个函数读取id
  function byId(id){
  return typeof(id)==='string'?document.getElementById(id):id;
  }
  //定义全局变量，利用索引的方法 确定 显示哪一张图片
  var index = 0,
  timer =null,
  pics = byId("banner").getElementsByTagName("div"),
  tab =  byId("tab").getElementsByTagName("div"),
  len = pics.length;
  //所有操放在一个大函数里
  function slideImg(){
  var main = byId("main");
  //滑过清除定时器，离开 继续
  main.onmouseover = function() {
  //滑过清除定时器
  if(timer){
  clearInterval(timer);
  }
  }
  //间歇调用脚本
  main.onmouseout = function() {
  timer = setInterval (function(){
  index++;
  if(index >= len){
   index = 0;
  }
  //调用自动切换图片
  changeImg();   
  },1000);
  }
  //自动在main上触 发离开的事件，
  main.onmouseout();
  //遍历所有的导航栏，点击 ，且绑定事件，实现点击导航栏切换相对应的图片
  for(var d=0; d<len; d++){
  //给所有的div添加一个id的属性，值为d,作为div的索引
  tab[d].id=Number(d);
  tab[d].onclick = function() {
  //改变index为当前的div的索引
  index = this.id;
  //调用changeImg，实现切换图片
  changeImg();
  }
  }
  }
  //切换图片
  function changeImg() {
  //遍历banner下所有的div,先将其隐藏
  for(var i =0; i<len; i++){
  pics[i].style.display = "none";
  tab[i].className=""
  }
  //根据index索引找到当前的div，将其显示出来
  pics[index].style.display = "block";
  tab[index].className="active";
  }
  slideImg();
  }