轮播图解析

轮播图解析

var timerId =null//创建定时器
 var timerAuto=null//自动轮播事件
 var n=0;//变量n
 function $(id){//获取ID的函数
  return document.getElementById(id);
 }
 function animate(obj,target){//轮播函数animate
  clearInterval(timerId);//清空计时器，阻止自动轮播
  timerId=setInterval(function(){//设置轮播定时器
   var leader=obj.offsetLeft;//获取父对象的左边距
   var step = ( target - leader ) / 5;//获取每10毫秒移动的步长
   step = step > 0 ? Math.ceil(step) : Math.floor(step);//如果剩下的步长大于0，向上取整，小于0向下取整，防止没有移动到框内
   leader = leader + step;//每次向左移动
   obj.style.left = leader + 'px';//需要加'px'不然识别不出来
  }, 10);
 }
 var buttons =$('buttons').getElementsByTagName('li');//获取按钮集合
  for (var i = 0; i < buttons.length; i++) {//寻找点击事件
   buttons[i].onclick=function(){//获取点击按钮事件
    for (var i = 0; i < buttons.length; i++) {//寻找每个按钮点击
     buttons[i].classList.remove('on');//清空每个class标记的'on'样式
     if(buttons[i]==this){//计算移动距离=-当前点击*1226
      n=i;
      var tgt = -n*1226;//添加移动距离
      animate($('listss'),tgt);//调用轮播函数
     }
    }
    this.classList.add('on');//当找到当前的点击时为这个按钮添加lclass标记的'on'样式
   }
  }
  $('right').onclick=function(){//点击右箭头
   if(n==5){//等于5时需跳转到开始及0
    $('listss').style.left = 0+'px';
    n = 0;     
   }
   n++;//点击一次向右偏移1226个像素
   var tgt = - n * 1226;
   animate($('listss'),tgt);//调用轮播函数
   for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('on');//寻找当前点击的添加按钮样式'on'
   }
   if(n == 5){//如果为n=5时为第一个添加'on'样式
    buttons[0].classList.add('on');
   }else{//否则正常添加样式
    buttons[n].classList.add('on');
   }
  }
  $('left').onclick = function(){
   if(n==0){
    $('listss').style.left= -4904 + 'px';
    n = 5;
   }
   n--;
   var tgt = - n * 1226;
   animate($('listss'),tgt);
   for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('on');
   }
   buttons[n].classList.add('on');
  }
  timerAuto = setInterval(function(){//自动轮播设置每过3000毫秒自动点击右箭头
   $('right').onclick();
  },3000);
  $('lunbo').onmouseover=function(){//当鼠标移动到轮播框内需停止轮播
   clearInterval(timerAuto);
  }
  $('lunbo').onmouseout=function(){//离开时从新设置自动轮播
   timerAuto = setInterval(function(){
    $('right').onclick();
   }, 3000);
  }