# 20191019

![js](https://img.shields.io/badge/language-js-orange.svg)

* 轮播图案例
[linkToHtml](./slider.html)
  * 动画代码 
  ```js
  function animate(ele,target) {
      console.log(ele,target)
      clearInterval(ele.timer)
      ele.timer = setInterval(function() {
        //当前左边宽度
        var current = ele.offsetLeft;
        //步长
        var step = 10;
        //确认方向
        step = target - current >= 0 ? step : -step;
        //动画完后左边宽度
        current += step;
        if(Math.abs(target - current) > Math.abs(step)) {
          //当左边需要移动的宽度大于移动的步长
          //直接移动
          ele.style.left = current + 'px'
        } else {
          //小于移动的步长
          //清除计时器
          clearInterval(ele.timer)
          //直接设置为终点
          ele.style.left = target + 'px';
        }
      },10)
    }
  ```

* 轮播图按钮案例
[linkToHtml](./buttonslider.html)

* css定位一般不超过5级

* html 特殊字符 
  * `<` >  大于号
  * `&gt;` <  小于号
  * `&amp;` & 与号           
  * `&quot;` " 引号
  * `&reg;`  已注册
  * `&copy;` 版权
  * `&trade;` 商标
  * `&ensp;`  半方大的空白
  * `&emsp;` 全方大的的空白
  * `&nbsp;` 不断行的空