diff --git "a/02 \346\236\227\351\221\253/20231212\350\275\256\346\222\255\345\233\276.md" "b/02 \346\236\227\351\221\253/20231212\350\275\256\346\222\255\345\233\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..03c9c7ce7d2379f948cdb8c09e62dedd10a0f49b
--- /dev/null
+++ "b/02 \346\236\227\351\221\253/20231212\350\275\256\346\222\255\345\233\276.md"	
@@ -0,0 +1,191 @@
+```js
+<!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" data-id="1" ></li>
+        <li data-id="2" ></li>
+        <li data-id="3" ></li>
+        <li data-id="4" ></li>
+        <li data-id="5" ></li>
+        <li data-id="6" ></li>
+        <li data-id="7" ></li>
+        <li data-id="8" ></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev"><</button>
+        <button class="next">></button>
+      </div>
+    </div>
+  </div>
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script>
+    const sliderData = [
+      { 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)' },
+    ]
+    const img=$('.slider-wrapper img')
+     const p=$('.slider-footer p')
+     const indicator=$('.slider-indicator')
+     const footer=$('.slider-footer')
+     const slider = $('.slider');
+     const prev = $('.prev');
+    const next = $('.next');
+let i=0
+
+ function render(){
+  img.attr('src',sliderData[i].url)
+  p.text(sliderData[i].title)
+  footer.css('background-color', sliderData[i].color)
+  indicator.find('.active').removeClass('active');
+  indicator.find(`li:eq(${i})`).addClass('active')
+
+    }
+
+  id=setInterval(function(){
+  if(i>sliderData.length-1){
+  i=0
+
+}
+  render()
+
+  i++
+},1000)
+
+prev.click(function(){
+  i--
+  if(i<0){
+        i=sliderData.length-1
+      }
+    render()
+
+})
+next.click(function(){
+  i++
+  if(i>=sliderData.length){
+        i=0
+      }
+
+  render()
+
+})
+ indicator.on('click', 'li', function (e) {
+
+      i =e.target.dataset.id-1
+      render();
+    });
+
+ slider.mouseenter(function () {
+      clearInterval(id);
+    }).mouseleave(function () {
+      id = setInterval(function () {
+        next.click();
+      }, 1000);
+    })
+</script>
+</body>
+</html>
+```
