From e9600b5b43655fcc88f019aa52aafeac84350c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E9=9C=87=E6=B4=8B?=
 <11785166+hzyai77@user.noreply.gitee.com>
Date: Wed, 13 Dec 2023 23:38:06 +0000
Subject: [PATCH 1/3] =?UTF-8?q?=E9=9F=A9=E9=9C=87=E6=B4=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 韩震洋 <11785166+hzyai77@user.noreply.gitee.com>
---
 ...\350\275\256\346\222\255\345\233\276md.md" | 178 ++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 "40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md"
diff --git "a/40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md" "b/40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md"
new file mode 100644
index 0000000..0734ffa
--- /dev/null
+++ "b/40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md"	
@@ -0,0 +1,178 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>轮播图点击切换</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+      width: 560px;
+      height: 400px;
+      overflow: hidden;
+    }
+
+    .slider-wrapper {
+      width: 100%;
+      height: 320px;
+    }
+
+    .slider-wrapper img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .slider-footer {
+      height: 80px;
+      background-color: rgb(100, 67, 68);
+      padding: 12px 12px 0 12px;
+      position: relative;
+    }
+
+    .slider-footer .toggle {
+      position: absolute;
+      right: 0;
+      top: 12px;
+      display: flex;
+    }
+
+    .slider-footer .toggle button {
+      margin-right: 12px;
+      width: 28px;
+      height: 28px;
+      appearance: none;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .slider-footer .toggle button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .slider-footer p {
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .slider-indicator {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      align-items: center;
+    }
+
+    .slider-indicator li {
+      width: 8px;
+      height: 8px;
+      margin: 4px;
+      border-radius: 50%;
+      background: #fff;
+      opacity: 0.4;
+      cursor: pointer;
+    }
+
+    .slider-indicator li.active {
+      width: 12px;
+      height: 12px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="slider">
+    <div class="slider-wrapper">
+      <img src="./images/slider01.jpg" alt="" />
+    </div>
+    <div class="slider-footer">
+      <p>对人类来说会不会太超前了？</p>
+      <ul class="slider-indicator">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev">&lt;</button>
+        <button class="next">&gt;</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
+  </script>
+  
+  <script>
+    // 1. 初始数据
+    const data = [
+      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+    ]
+
+
+    $(document).ready(function(){
+      
+      let i=0  
+
+      function render(i){
+       
+        const index=data[e]
+      $('div.slider-wrapper>img').attr('src',index.url)
+      $('div.slider-footer>p').text(index.title)
+      $('div.slider-footer').css('backgroundColor',index.color)
+      const li=$('ul.slider-indicator li')
+      li.removeClass('active')
+      li.eq(e).addClass('active') 
+      }      
+
+      function next(){   
+        i++;
+        if (i >= data.length) {
+          i= 0;
+        }
+        render(i)
+      }
+
+      function prev(){    
+        i--;
+        if(i<0){
+          i=data.length-1
+        }
+        render(i)
+      }
+
+      $('button.prev').click(prev)
+      $('button.next').click(next)
+
+      setInterval(next,1000)  
+    })
+
+  </script>
+</body>
+
+</html>
+```
+
-- 
Gitee


From 22cb089d69576568b39bb881e244db0c857fa87b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E9=9C=87=E6=B4=8B?=
 <11785166+hzyai77@user.noreply.gitee.com>
Date: Wed, 13 Dec 2023 23:38:33 +0000
Subject: [PATCH 2/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=2040?=
 =?UTF-8?q?=20=E9=9F=A9=E9=9C=87=E6=B4=8B/=E8=BD=AE=E6=92=AD=E5=9B=BEmd.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\350\275\256\346\222\255\345\233\276md.md" | 178 ------------------
 1 file changed, 178 deletions(-)
 delete mode 100644 "40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md"

diff --git "a/40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md" "b/40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md"
deleted file mode 100644
index 0734ffa..0000000
--- "a/40 \351\237\251\351\234\207\346\264\213/\350\275\256\346\222\255\345\233\276md.md"	
+++ /dev/null
@@ -1,178 +0,0 @@
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>轮播图点击切换</title>
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-
-    .slider {
-      width: 560px;
-      height: 400px;
-      overflow: hidden;
-    }
-
-    .slider-wrapper {
-      width: 100%;
-      height: 320px;
-    }
-
-    .slider-wrapper img {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-
-    .slider-footer {
-      height: 80px;
-      background-color: rgb(100, 67, 68);
-      padding: 12px 12px 0 12px;
-      position: relative;
-    }
-
-    .slider-footer .toggle {
-      position: absolute;
-      right: 0;
-      top: 12px;
-      display: flex;
-    }
-
-    .slider-footer .toggle button {
-      margin-right: 12px;
-      width: 28px;
-      height: 28px;
-      appearance: none;
-      border: none;
-      background: rgba(255, 255, 255, 0.1);
-      color: #fff;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-
-    .slider-footer .toggle button:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .slider-footer p {
-      margin: 0;
-      color: #fff;
-      font-size: 18px;
-      margin-bottom: 10px;
-    }
-
-    .slider-indicator {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      display: flex;
-      align-items: center;
-    }
-
-    .slider-indicator li {
-      width: 8px;
-      height: 8px;
-      margin: 4px;
-      border-radius: 50%;
-      background: #fff;
-      opacity: 0.4;
-      cursor: pointer;
-    }
-
-    .slider-indicator li.active {
-      width: 12px;
-      height: 12px;
-      opacity: 1;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="slider">
-    <div class="slider-wrapper">
-      <img src="./images/slider01.jpg" alt="" />
-    </div>
-    <div class="slider-footer">
-      <p>对人类来说会不会太超前了？</p>
-      <ul class="slider-indicator">
-        <li class="active"></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ul>
-      <div class="toggle">
-        <button class="prev">&lt;</button>
-        <button class="next">&gt;</button>
-      </div>
-    </div>
-  </div>
-
-  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
-  </script>
-  
-  <script>
-    // 1. 初始数据
-    const data = [
-      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
-      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
-      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
-      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
-      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
-      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
-      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
-      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
-    ]
-
-
-    $(document).ready(function(){
-      
-      let i=0  
-
-      function render(i){
-       
-        const index=data[e]
-      $('div.slider-wrapper>img').attr('src',index.url)
-      $('div.slider-footer>p').text(index.title)
-      $('div.slider-footer').css('backgroundColor',index.color)
-      const li=$('ul.slider-indicator li')
-      li.removeClass('active')
-      li.eq(e).addClass('active') 
-      }      
-
-      function next(){   
-        i++;
-        if (i >= data.length) {
-          i= 0;
-        }
-        render(i)
-      }
-
-      function prev(){    
-        i--;
-        if(i<0){
-          i=data.length-1
-        }
-        render(i)
-      }
-
-      $('button.prev').click(prev)
-      $('button.next').click(next)
-
-      setInterval(next,1000)  
-    })
-
-  </script>
-</body>
-
-</html>
-```
-
-- 
Gitee


From 527fc87d5931298ea28584cec52e22e62a0f3f1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E9=9C=87=E6=B4=8B?=
 <11785166+hzyai77@user.noreply.gitee.com>
Date: Wed, 13 Dec 2023 23:39:36 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=E9=9F=A9=E9=9C=87=E6=B4=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 韩震洋 <11785166+hzyai77@user.noreply.gitee.com>
---
 ...\350\275\256\346\222\255\345\233\276md.md" | 178 ++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 "40 \351\237\251\351\234\207\346\264\213/20231213\350\275\256\346\222\255\345\233\276md.md"

diff --git "a/40 \351\237\251\351\234\207\346\264\213/20231213\350\275\256\346\222\255\345\233\276md.md" "b/40 \351\237\251\351\234\207\346\264\213/20231213\350\275\256\346\222\255\345\233\276md.md"
new file mode 100644
index 0000000..0734ffa
--- /dev/null
+++ "b/40 \351\237\251\351\234\207\346\264\213/20231213\350\275\256\346\222\255\345\233\276md.md"	
@@ -0,0 +1,178 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>轮播图点击切换</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+      width: 560px;
+      height: 400px;
+      overflow: hidden;
+    }
+
+    .slider-wrapper {
+      width: 100%;
+      height: 320px;
+    }
+
+    .slider-wrapper img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .slider-footer {
+      height: 80px;
+      background-color: rgb(100, 67, 68);
+      padding: 12px 12px 0 12px;
+      position: relative;
+    }
+
+    .slider-footer .toggle {
+      position: absolute;
+      right: 0;
+      top: 12px;
+      display: flex;
+    }
+
+    .slider-footer .toggle button {
+      margin-right: 12px;
+      width: 28px;
+      height: 28px;
+      appearance: none;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .slider-footer .toggle button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .slider-footer p {
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .slider-indicator {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      align-items: center;
+    }
+
+    .slider-indicator li {
+      width: 8px;
+      height: 8px;
+      margin: 4px;
+      border-radius: 50%;
+      background: #fff;
+      opacity: 0.4;
+      cursor: pointer;
+    }
+
+    .slider-indicator li.active {
+      width: 12px;
+      height: 12px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="slider">
+    <div class="slider-wrapper">
+      <img src="./images/slider01.jpg" alt="" />
+    </div>
+    <div class="slider-footer">
+      <p>对人类来说会不会太超前了？</p>
+      <ul class="slider-indicator">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev">&lt;</button>
+        <button class="next">&gt;</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
+  </script>
+  
+  <script>
+    // 1. 初始数据
+    const data = [
+      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+    ]
+
+
+    $(document).ready(function(){
+      
+      let i=0  
+
+      function render(i){
+       
+        const index=data[e]
+      $('div.slider-wrapper>img').attr('src',index.url)
+      $('div.slider-footer>p').text(index.title)
+      $('div.slider-footer').css('backgroundColor',index.color)
+      const li=$('ul.slider-indicator li')
+      li.removeClass('active')
+      li.eq(e).addClass('active') 
+      }      
+
+      function next(){   
+        i++;
+        if (i >= data.length) {
+          i= 0;
+        }
+        render(i)
+      }
+
+      function prev(){    
+        i--;
+        if(i<0){
+          i=data.length-1
+        }
+        render(i)
+      }
+
+      $('button.prev').click(prev)
+      $('button.next').click(next)
+
+      setInterval(next,1000)  
+    })
+
+  </script>
+</body>
+
+</html>
+```
+
-- 
Gitee

