js原生轮播图

思路：首先要知道需求，先从简单的地方入手，然后一步一步的去改进，但是首先要想好做每一步目的，原因，不要只知道代码是这么写的，而不去想为什么要这么做。

动画函数封装

 function animate(obj, target, callback) { //做动画的对象，需要移动的距离，回调函数
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;//缓动动画实现原理
                step = step > 0 ? Math.ceil(step) : Math.floor(step); //取整的问题，否者后面会有瑕疵
                if(obj.offsetLeft == target){  //判断时候到达位置
                    clearInterval(obj.timer); //清除定时器
                    obj.timer = null; //将该对象的定时器设置为空，释放内存
                    callback && callback(); //如果有回调函数就调用回调函数
                }
                obj.style.left = obj.offsetLeft + step + 'px'; //移动
            }, 15);
        }

1，首先获取几个等会肯定要用到的元素；

	    var arrowLeft = document.querySelector('.arrow-l');  //获取左右两个小箭头
        var arrowRight = document.querySelector('.arrow-r');
        var focus = document.querySelector('.center'); //获取父盒子
        var focusWidth = focus.offsetWidth;  //得到父盒子的宽度，一会图片的切换需要用到
        var ul = focus.querySelector('ul');//获取ul，为ol动态创建li做准备
        var ol = focus.querySelector('ol');

2，原先左右的两个小箭头是隐藏的，只有当鼠标经过了它们所在的父盒子，它们才会显示，所以可以为 focus 添加监听事件了

focus.addEventListener('mouseenter', function() {        //当鼠标经过时显示
            arrowRight.style.display = arrowLeft.style.display = 'block';
});

 focus.addEventListener('mouseleave',  function() {     //离开隐藏
            arrowRight.style.display = arrowLeft.style.display = 'none';
  }

3，一般到了后面会不确定每次的轮播图的图片有几张，所以与图片所对应的小圆点建议动态的创建，根据图片的个数，来创建对应的圆点个数

for(var i = 0; i < ul.children.length; i++){
            var li = document.createElement('li');
            li.setAttribute('index', i);//再创建li的同时给它设置一个索引号，后面会用到
            li.addEventListener('click', fn3);//再给它们添加点击事件
            ol.appendChild(li);  //追加到ol中
 }
 function fn3() {   //点击每个小圆点所做的事
      for(var i = 0; i < ol.children.length; i++){  //排他思想，将所有的小圆点的样式都先去掉
            ol.children[i].className = '';  
       }
      var index = this.getAttribute('index');  //获取图片的索引值
      animate(ul, -index * focusWidth);//开始做移动效果，根据你所点击的小圆点的索引值，
      	//乘以一个盒子的宽度，就是ul索要移动的距离，
      this.className = 'current'; //再设置你所点击的小圆点的样式
 }
 ol.children[0].className = 'current'; //默认的显示为第一张图片，