From 91ed28fafd2642d68ae823c929d0dbf2a44c6d71 Mon Sep 17 00:00:00 2001 From: RainSun Date: Sun, 20 Oct 2019 16:13:09 +0800 Subject: [PATCH] update --- 20191019/20191019.md | 2 +- 20191019/buttonSlider.html | 3 - 20191020/20191020.md | 9 ++- 20191020/autoSlider.html | 116 +++++++++++++++++++++++++++++++++++++ 20191020/test.html | 34 +++++++++++ README.md | 10 +++- 6 files changed, 168 insertions(+), 6 deletions(-) create mode 100644 20191020/autoSlider.html create mode 100644 20191020/test.html 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 @@ * `™` 商标 * ` ` 半方大的空白 * ` ` 全方大的的空白 - * ` ` 不断行的空 + * ` ` 不断行的空 \ 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 @@ + + + + + + + Document + + + +
+
+
    +
    • +
    • +
    • +
    • +
    • +
    • +
+
+ +
+ + + \ 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 @@ + + + + + + + Document + + + +
+
+
+ + \ 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