diff --git a/20191016/20191016.md b/20191016/20191016.md
new file mode 100644
index 0000000..f7bdeb6
--- /dev/null
+++ b/20191016/20191016.md
@@ -0,0 +1,10 @@
+# 20191013
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+
+* offset示例
+[linkToHtml](./offset.html)
+  * offsetWidth 获取元素的宽度(content , padding , border)
+  * offsetHeight 获取元素的高度 
+  * offsetLeft 获取元素距离屏幕左侧的距离
+    * 分析父级有没有定位属性，正常流式文档流就是屏幕左侧，浮动了就是距离浮动元素的距离 ()
\ No newline at end of file
diff --git a/20191016/moveBox.html b/20191016/moveBox.html
new file mode 100644
index 0000000..9350265
--- /dev/null
+++ b/20191016/moveBox.html
@@ -0,0 +1,49 @@
+<!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;
+    }
+    div {
+      width: 100px;
+      height: 100px;
+      background: red;
+      position: absolute;
+    }
+  </style>
+</head>
+<body>
+  <input type="button" value="移动到400px的位置" id="btn1">
+  <div id="dv"></div>
+  <script type='text/javascript'>
+    var btn1 = document.getElementById('btn1')
+    var dv = document.getElementById('dv')
+    var timer
+    btn1.onclick = function() {
+      //让div移动到400px的位置
+      // dv.style.left = '400px';
+      //一步一步走 匀速
+      var step = 1
+      //每隔一段时间向右走一步 创建定时器
+      var current = dv.offsetLeft
+      clearInterval(timer);
+      timer = setInterval(function() {
+        current += step;
+        //把最新的赋给div
+        dv.style.left = current +'px'
+        if(current > 400) {
+          clearInterval(timer);
+          current = 400
+          // return
+        }
+      }, 10)
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/20191016/offset.html b/20191016/offset.html
new file mode 100644
index 0000000..b6cb1ba
--- /dev/null
+++ b/20191016/offset.html
@@ -0,0 +1,51 @@
+<!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;
+    }
+    .outer {
+      width: 400px;
+      height: 400px;
+      background: red;
+      padding: 50px;
+      border: 10px solid skyblue;
+      margin: 20px;
+    }
+    .inner {
+      width: 100px;
+      height:100px;
+      background: green;
+      padding: 10px;
+      border: 5px solid blue;
+      margin: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="outer">
+    <div class="inner" id="inner"></div>
+  </div>
+  <input type="button" value="按钮" id='btn'>
+  <script type="text/javascript">
+    //offset
+    var btn = document.getElementById('btn')
+    var inner = document.getElementById('inner')
+    document.getElementById('btn').onclick = function() {
+      //获取元素的宽度(content border padding)
+      console.log(inner.offsetWidth); //不包括maigin
+      //获取元素的高度
+      console.log(inner.offsetHeight);
+      //普通文档流 元素距离左侧的距离
+      console.log(inner.offsetLeft);
+      console.log(inner.offsetTop);
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/20191018/offset.html b/20191018/offset.html
new file mode 100644
index 0000000..2e95422
--- /dev/null
+++ b/20191018/offset.html
@@ -0,0 +1,62 @@
+<!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;
+    }
+    div {
+      height: 300px;
+      width: 300px;
+      background: red;
+      position: absolute;
+    }
+  </style>
+</head>
+<body>
+  <input type="button" value="移动到400px" id='btn1'>
+  <input type="button" value="移动到800px" id='btn2'>
+  <div id="dv"></div>
+  <script type="text/javascript">
+    window.onload = function() {
+      var btn1 = document.getElementById('btn1')
+      var dv = document.getElementById('dv')
+      var timer1;
+      btn1.onclick=function() {
+        var current = dv.offsetLeft
+        var step = 10
+        timer1 = setInterval(function(){
+          current += step;
+          //先判断后赋值
+          if(current >= 400) {
+            clearInterval(timer1)
+            current = 400
+          }
+          dv.style.left = current + 'px';
+        }, 10)
+      }
+
+      var btn2 = document.getElementById('btn2')
+      var timer2;
+      btn2.onclick=function() {
+        var current = dv.offsetLeft
+        var step = 10
+        timer2 = setInterval(function(){
+          current += step;
+          //先判断后赋值
+          if(current >= 800) {
+            clearInterval(timer2)
+            current = 800
+          }
+          dv.style.left = current + 'px';
+        }, 10)
+      }
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/20191019/20191019.md b/20191019/20191019.md
new file mode 100644
index 0000000..558aabf
--- /dev/null
+++ b/20191019/20191019.md
@@ -0,0 +1,6 @@
+# 20191019
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+
+* 轮播图案例
+[linkToHtml](./slider.html)
\ No newline at end of file
diff --git a/20191019/slider.html b/20191019/slider.html
new file mode 100644
index 0000000..b6ab960
--- /dev/null
+++ b/20191019/slider.html
@@ -0,0 +1,139 @@
+<!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;
+      border: 1px solid #ccc;
+      padding: 10px;
+      margin: 50px auto;
+    }
+    .inner {
+      width: 590px;
+      height: 470px;
+      position: relative;
+      overflow: hidden;
+    }
+    .inner ul li {
+      float: left;
+      
+    }
+    .inner ul {
+      width: 500%;
+      position: absolute;
+    }
+    .inner img {
+      width: 590px;
+      
+    }
+
+    .focus {
+      position: absolute;
+      left: 50px;
+      bottom:25px;
+    }
+    .focus span{
+      padding:10px;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 50%;
+      font-size: 0;
+      display: inline-block;
+      transition: all 0.3s;
+      margin-left: 5px;
+    }
+
+    .focus span:hover {
+      transform:scale(1.2);
+      background: red;
+    }
+  </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>
+      </ul>
+      <div class="focus" id="focus">
+        <span>1</span>
+        <span>1</span>
+        <span>1</span>
+        <span>1</span>
+        <span>1</span>
+      </div>
+    </div>
+  </div>
+  <script type='text/javascript'>
+    function my$(id) {
+      return document.getElementById(id)
+    } 
+    //获取元素
+    var slider = my$('slider')
+    var inner = slider.children[0]
+    var ulObj = inner.children[0]
+    var focus = inner.children[1]
+    var spans = focus.children
+    //获取图片的宽度
+    // var imgW = 590;
+    var imgW = inner.offsetWidth
+    console.log(imgW)
+    //批量绑定
+    var length = spans.length
+    for(var i=0;i<length;i++) {
+      // spans[i].index = i;
+      console.log(spans[i])
+      spans[i].setAttribute('index',i)
+      spans[i].onmouseover = function() {
+        //移动 目标位置，向什么地方移动多少距离 ul
+        animate(ulObj,-this.getAttribute('index')*imgW);
+      }
+      spans[i].onmouseout = function() {
+        //开启自动播放
+      }
+    }
+    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;
+        console.log('step',step)
+        console.log('target',target - current)
+        //动画完后左边宽度
+        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)
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
