From fbebcdc9f9cb3f7a4c075e4d525c51a0c3de59b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E4=BA=9A=E8=BE=89?= <3192667214@qq.com>
Date: Thu, 14 Dec 2023 05:03:49 +0000
Subject: [PATCH] =?UTF-8?q?41=20=E5=91=A8=E4=BA=9A=E8=BE=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 周亚辉 <3192667214@qq.com>
---
 ...s \350\275\256\346\222\255\345\233\276.md" | 177 ++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 "41 \345\221\250\344\272\232\350\276\211/20231213 js \350\275\256\346\222\255\345\233\276.md"
diff --git "a/41 \345\221\250\344\272\232\350\276\211/20231213 js \350\275\256\346\222\255\345\233\276.md" "b/41 \345\221\250\344\272\232\350\276\211/20231213 js \350\275\256\346\222\255\345\233\276.md"
new file mode 100644
index 0000000..018df02
--- /dev/null
+++ "b/41 \345\221\250\344\272\232\350\276\211/20231213 js \350\275\256\346\222\255\345\233\276.md"	
@@ -0,0 +1,177 @@
+```
+<!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>
+```
\ No newline at end of file
-- 
Gitee

