diff --git a/20191019/20191019.md b/20191019/20191019.md
index 8e9ac8f..a5618b2 100644
--- a/20191019/20191019.md
+++ b/20191019/20191019.md
@@ -48,4 +48,4 @@
   * `&trade;` 商标
   * `&ensp;`  半方大的空白
   * `&emsp;` 全方大的的空白
-  * `&nbsp;` 不断行的空
+  * `&nbsp;` 不断行的空
\ No newline at end of file
diff --git a/20191019/buttonSlider.html b/20191019/buttonSlider.html
index 61413cc..2883bca 100644
--- a/20191019/buttonSlider.html
+++ b/20191019/buttonSlider.html
@@ -115,7 +115,6 @@
       //向左移动5张图片的距离 点击5次
       //...
       aniamte(ul, target)
-
     }
 
     prev.onclick = function() {
@@ -137,11 +136,9 @@
       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) > step) {
           ele.style.left = current + 'px';
         } else {
diff --git a/20191020/20191020.md b/20191020/20191020.md
index e6b0b93..83ad47a 100644
--- a/20191020/20191020.md
+++ b/20191020/20191020.md
@@ -2,4 +2,11 @@
 
 ![js](https://img.shields.io/badge/language-js-orange.svg)
 
-* 
\ No newline at end of file
+* 自动轮播图案例
+[linkToHtml](./autoslider.html)
+  * 自动向左轮播，设置定时器往左挪
+  * 为了达到流畅的效果，将第一张复制再最后边，播放完再跳转回第一张
+  * 将重复的代码封装成函数
+  * 鼠标移入自动停止
+  * 鼠标移出自动开始
+  
\ No newline at end of file
diff --git a/20191020/autoSlider.html b/20191020/autoSlider.html
new file mode 100644
index 0000000..d7269f6
--- /dev/null
+++ b/20191020/autoSlider.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    ul {
+      list-style: none;
+    }
+    .slider {
+      width: 590px;
+      height: 470px;
+      padding: 10px;
+      border : 1px solid #ccc;
+      margin: 50px auto;
+      position: relative;
+    }
+    .slider .inner {
+      width: 590px;
+      height: 470px;
+      position: relative;
+      overflow: hidden;
+
+    }
+    .slider .inner ul {
+      width: 600%;
+      position: absolute;
+    }
+    .slider .inner ul li {
+      float: left;
+    }
+
+    
+  </style>
+</head>
+<body>
+  <div class="slider" id="slider">
+    <div class="inner">
+      <ul>
+        <li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
+        <li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/73861/8/7311/133024/5d562902E29c956c1/da390c8c345c48e0.jpg.webp" alt="" srcset=""></a></li>
+        <li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/79136/10/13206/197242/5da92d47Ee54665df/39d85a2990ba58d1.jpg.webp" alt="" srcset=""></a></li>
+        <li><a href="#"><img src="https://imgcps.jd.com/ling/22692212401/6JGh6JCE6YWS6ZKc5oOg/6YOo5YiGMuS7tjXmipg/p-5bd8253082acdd181d02fa02/153dad62.jpg" alt="" srcset=""></a></li>
+        <li><a href="#"><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/46901/24/7545/62345/5d52317fEebadcf80/8fb168cddd5ef2b9.jpg.webp" alt="" srcset=""></a></li>
+        <li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
+      </ul>    
+    </div>
+   
+  </div>
+  <script type="text/javascript">
+    function my$(id) {
+      return document.getElementById(id)
+    }
+    //获取元素slider
+    var slider = my$('slider');
+    //获取inner
+    var inner = slider.children[0] 
+    //获取ul
+    var ul = inner.children[0]
+    //获取图片的宽度
+    var imgW = inner.offsetWidth
+    
+    //一直改变ul的left值 达到目标循环播放所有图
+    //创建定时器
+    //声明当前的位置
+    var current = 0;
+
+    function startslider() {
+      return setInterval(function(){
+        //只要当前的位置一直减少就是向左移动
+        current -= 3;
+        if(current < -2950) {
+          ul.style.left = 0 +'px';
+          current = 0
+        }
+        ul.style.left = current + 'px'
+      },1)
+    }
+
+    var timer = startslider();
+    
+    slider.onmouseover = function() {
+      clearInterval(timer);
+      timer = null;
+    }
+
+    slider.onmouseout = function() {
+      timer = startslider();
+    }
+
+
+    function aniamte(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) > step) {
+          ele.style.left = current + 'px';
+        } else {
+          clearInterval(ele.temer)
+          ele.style.left = target + 'px'
+          ele.temer = null;
+        }
+      }, 10)
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/20191020/test.html b/20191020/test.html
new file mode 100644
index 0000000..16c966b
--- /dev/null
+++ b/20191020/test.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style>
+    .box {
+      margin: 300px;
+      height: 200px;
+      width: 200px;
+      background: green;
+      font-size: 40px;
+      position: relative;
+      transform:translate(10px,20px) rotate(37deg) scale(1.5, 2);
+    }
+
+    .dot {
+      height:10px;
+      width: 10px;
+      position: absolute;
+      left: 181px;
+      top:50px;
+      background: red;
+    }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="dot"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/README.md b/README.md
index d8a11bc..3dc31c3 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,7 @@
 ## 20191019
 
 ![js](https://img.shields.io/badge/language-js-orange.svg)
-[linkToMd](./20191018/20191019.md)
+[linkToMd](./20191019/20191019.md)
 
 * 轮播图案例
 * 轮播图按钮案例
@@ -106,4 +106,12 @@
 
 * [上课视频链接](https://pan.baidu.com/s/18LetxRVExyVBQAq20Xo3_g&shfl=sharepset) 
 提取码：pne2  
+---
+
+## 20191020
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+[linkToMd](./20191020/20191020.md)
+
+* 自动轮播图案例
 ---
\ No newline at end of file
