diff --git a/20191019/20191019.md b/20191019/20191019.md
index 226345f..8e9ac8f 100644
--- a/20191019/20191019.md
+++ b/20191019/20191019.md
@@ -31,4 +31,21 @@
         }
       },10)
     }
-  ```
\ No newline at end of file
+  ```
+
+* 轮播图按钮案例
+[linkToHtml](./buttonslider.html)
+
+* css定位一般不超过5级
+
+* html 特殊字符 
+  * `&lt;` >  大于号
+  * `&gt;` <  小于号
+  * `&amp;` & 与号           
+  * `&quot;` " 引号
+  * `&reg;`  已注册
+  * `&copy;` 版权
+  * `&trade;` 商标
+  * `&ensp;`  半方大的空白
+  * `&emsp;` 全方大的的空白
+  * `&nbsp;` 不断行的空
diff --git a/20191019/buttonSlider.html b/20191019/buttonSlider.html
new file mode 100644
index 0000000..61413cc
--- /dev/null
+++ b/20191019/buttonSlider.html
@@ -0,0 +1,156 @@
+<!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: 500%;
+      position: absolute;
+    }
+    .slider .inner ul li {
+      float: left;
+    }
+
+    .slider .btns {
+      /* position: absolute;
+      left: 10px;
+      right: 10px;
+      top: 50%; */
+    }
+
+    .slider .btns span {
+      /* display: inline-block; */
+      width:45px;
+      height: 45px;
+      line-height: 45px;
+      text-align: center;
+      font-size: 20px;
+      font-weight: 600;
+      color: #000000;
+      background: rgba(255, 255, 255, 0.8);
+      cursor: pointer;
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      margin-top:-22px;
+    }
+
+    .slider .btns span:last-child {
+      right: 10px;
+      left: auto;
+    }
+
+  </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>
+    <div class="btns">
+      <span>&lt;</span>
+      <span>&gt;</span>
+    </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]
+    //获取btn
+    var btns = slider.children[1]
+    //获取图片的宽度
+    var imgW = inner.offsetWidth
+    //获取左边按钮
+    var prev = btns.children[0]
+    //获取右边按钮
+    var next = btns.children[1]
+    //添加右侧按钮的点击事件
+    //添加计数器
+    var index = 0
+    next.onclick = function() {
+      if(index < 4) index++
+      var target = -imgW * index
+      //ul移动 改变ul的left值
+      //向左移动一张图片的距离 点击一次
+      //向左移动2张图片的距离 点击2次
+      //向左移动3张图片的距离 点击3次
+      //向左移动4张图片的距离 点击4次
+      //向左移动5张图片的距离 点击5次
+      //...
+      aniamte(ul, target)
+
+    }
+
+    prev.onclick = function() {
+      if(index > 0) {
+        index --
+      }
+      var target = -imgW * index
+      aniamte(ul, target)
+    }
+
+    //给slider添加鼠标移入移出效果， 控制按钮的显示和隐藏
+    slider.onmouseover = function() {
+      btns.style.display = 'block';
+    }
+    slider.onmouseout = function() {
+      btns.style.display = 'none';
+    }
+    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/20191020.md b/20191020/20191020.md
new file mode 100644
index 0000000..e6b0b93
--- /dev/null
+++ b/20191020/20191020.md
@@ -0,0 +1,5 @@
+# 20191020
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+
+* 
\ No newline at end of file
diff --git a/git.md b/Miscellaneous/git.md
similarity index 100%
rename from git.md
rename to Miscellaneous/git.md
diff --git a/Miscellaneous/img2string.html b/Miscellaneous/img2string.html
new file mode 100644
index 0000000..68d5f40
--- /dev/null
+++ b/Miscellaneous/img2string.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+ 
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script>
+        let img = new Image();
+        let logo;
+ 
+        //加载canvas
+        window.onload = () => {
+            let canvas = document.getElementById("canvas");
+            canvasInfo = canvas.getContext("2d");
+            document.getElementById('btn').onclick = start
+            document.getElementById('upButton').onchange = getImg;
+        };
+ 
+        //执行
+        let start = () => {
+          console.log('start')
+            //清空字符画
+            logo = "";
+ 
+            //先记录比率,如果宽，那么先缩放宽,再用比率算出长,反之同理
+            let rate = img.width / img.height;
+            if (rate > 1) {
+                img.width = 400;
+                img.height = 400 / rate;
+            } else {
+                img.height = 400;
+                img.width = 400 / rate;
+            }
+ 
+            //将图片绘制在canvas上
+            canvasInfo.drawImage(img, 0, 0, img.width, img.height);
+ 
+            //从canvas上获取像素信息
+            var imgData = canvasInfo.getImageData(0, 0, img.width, img.height);
+ 
+            //调整字符大小，追求更高精度就在这里调小
+            let size = 5 - parseInt(document.getElementById("thisSize").value);
+            //调整是否为彩色
+            let color = document.getElementById("thisColor").value !== "false";
+ 
+            //生成主体，逐个读取字符
+            for (let i = 0; i < img.width; i = i + size) {
+                for (let j = 0; j < img.height; j = j + size) {
+                    let curPoint = (i * img.width + j) * 4; //×4是因为，1为r，2为g，3为b，4为a，四个是一组rgba值
+                    let gray =
+                        imgData.data[curPoint] * 0.299 +
+                        imgData.data[curPoint + 1] * 0.587 +
+                        imgData.data[curPoint + 2] * 0.114; //计算灰度值
+                    thisColor = `rgb(${imgData.data[curPoint]},${
+                          imgData.data[curPoint + 1]
+                        },${imgData.data[curPoint + 2]})`; //保存像素点rgb值
+                    color ? toText(gray, thisColor) : toText(gray, false); //有颜色就转化rgb值，没颜色就不转
+                }
+                logo = logo + "</br>";
+            }
+ 
+            document.getElementById("rightDiv").innerHTML = logo; //将字符串填充到html
+        };
+ 
+        //读取图片
+        let getImg = file => {
+            var reader = new FileReader();
+            reader.readAsDataURL(document.getElementById("upButton").files[0]);
+            reader.onload = function() {
+                img.src = reader.result;
+            };
+        };
+ 
+        //根据灰度转化字符，添加颜色
+        function toText(g, thisColor) {
+            if (thisColor) {
+                logo = logo + "<span style='color:" + thisColor + "'>";
+            }
+            if (g <= 17) {
+                logo = logo + "M";
+            } else if (g > 17 && g <= 34) {
+                logo = logo + "N";
+            } else if (g > 34 && g <= 51) {
+                logo = logo + "H";
+            } else if (g > 51 && g <= 68) {
+                logo = logo + "Q";
+            } else if (g > 68 && g <= 85) {
+                logo = logo + "&";
+            } else if (g > 85 && g <= 102) {
+                logo = logo + "O";
+            } else if (g > 102 && g <= 119) {
+                logo = logo + "C";
+            } else if (g > 119 && g <= 136) {
+                logo = logo + "?";
+            } else if (g > 136 && g <= 153) {
+                logo = logo + "7";
+            } else if (g > 153 && g <= 170) {
+                logo = logo + ">";
+            } else if (g > 170 && g <= 187) {
+                logo = logo + "!";
+            } else if (g > 187 && g <= 204) {
+                logo = logo + ":";
+            } else if (g > 204 && g <= 221) {
+                logo = logo + "-";
+            } else if (g > 221 && g <= 238) {
+                logo = logo + ";";
+            } else {
+                logo = logo + ".";
+            }
+            if (thisColor) {
+                logo = logo + "<span>";
+            }
+        }
+    </script>
+    <title>图片转字符</title>
+</head>
+ 
+<body>
+    <!-- 图片上传 -->
+    <form id="uf">
+        <input type="file" name="file" id="upButton" οnchange="getImg()" />
+    </form>
+ 
+    <!-- 选择字符画大小 -->
+    请输入精度等级：
+    <select id="thisSize">
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+    </select>
+ 
+    <!-- 选择颜色 -->
+    是否使用颜色：
+    <select id="thisColor">
+        <option value="true">是</option>
+        <option value="false">否</option>
+    </select>
+ 
+    <!-- 执行按钮 -->
+    <button id="btn">开始执行</button>
+ 
+    <!-- 辅助canvas，设为隐藏 -->
+    <div id="leftDiv">
+        <canvas id="canvas" width="400" height="400" style="display:none">Canvas</canvas>
+    </div>
+ 
+    <!-- 生成位置 -->
+    <div id="rightDiv" style="font-family:'Consolas';line-height: 0.5em;"></div>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/README.md b/README.md
index fc7617c..d8a11bc 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,18 @@
 # 吉软大前端笔记本
 
+## Miscellaneous
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+* 图片转字符串
+[linkToHtml](./Miscellaneous/img2string.html)
+
+![git](https://img.shields.io/badge/language-git-green.svg)
+* git常用命令总结
+[linkToMd](./Miscellaneous/git.md)
+
+---
+
+
 ## 20190925
 
 ![js](https://img.shields.io/badge/language-js-orange.svg)
@@ -58,3 +71,39 @@
 * [上课视频链接](https://pan.baidu.com/s/1l4mVVmklb1Hiz2uWQxBdxA) 
 提取码：nc9w 
 ---
+
+## 20191016
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+[linkToMd](./20191016/20191016.md)
+
+* offset示例
+
+* [上课视频链接](https://pan.baidu.com/s/1-iDQ03LSqXQ1Yu04IX0rgg) 
+提取码：ixle  
+---
+
+## 20191018
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+[linkToHtml](./20191018/offset.html)
+
+* offset示例
+
+* [上课视频链接](https://pan.baidu.com/s/1hGA9ohkQ7J9b1GO6AjSMeQ&shfl=sharepset) 
+提取码：smie
+---
+
+## 20191019
+
+![js](https://img.shields.io/badge/language-js-orange.svg)
+[linkToMd](./20191018/20191019.md)
+
+* 轮播图案例
+* 轮播图按钮案例
+* css定位一般不超过5级
+* html 特殊字符
+
+* [上课视频链接](https://pan.baidu.com/s/18LetxRVExyVBQAq20Xo3_g&shfl=sharepset) 
+提取码：pne2  
+---
\ No newline at end of file
