From 65ba14f6c007739b132f2730b6dffbca79d00c55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E8=AF=97=E9=BE=99?= <2483323272@qq.com>
Date: Fri, 15 Dec 2023 05:00:30 +0000
Subject: [PATCH] =?UTF-8?q?=E9=BB=84=E8=AF=97=E9=BE=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 黄诗龙 <2483323272@qq.com>
---
 ...15\344\271\240\344\275\234\344\270\232.md" | 326 ++++++++++++++++++
 1 file changed, 326 insertions(+)
 create mode 100644 "18 \351\273\204\350\257\227\351\276\231/20231214\345\244\215\344\271\240\344\275\234\344\270\232.md"
diff --git "a/18 \351\273\204\350\257\227\351\276\231/20231214\345\244\215\344\271\240\344\275\234\344\270\232.md" "b/18 \351\273\204\350\257\227\351\276\231/20231214\345\244\215\344\271\240\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..98c7824
--- /dev/null
+++ "b/18 \351\273\204\350\257\227\351\276\231/20231214\345\244\215\344\271\240\344\275\234\344\270\232.md"	
@@ -0,0 +1,326 @@
+~~~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>tab栏切换</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .tab {
+      width: 590px;
+      height: 340px;
+      margin: 20px;
+      border: 1px solid #e4e4e4;
+    }
+
+    .tab-nav {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .tab-nav h3 {
+      font-size: 24px;
+      font-weight: normal;
+      margin-left: 20px;
+    }
+
+    .tab-nav ul {
+      list-style: none;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .tab-nav ul li {
+      margin: 0 20px;
+      font-size: 14px;
+    }
+
+    .tab-nav ul li a {
+      text-decoration: none;
+      border-bottom: 2px solid transparent;
+      color: #333;
+    }
+
+    .tab-nav ul li a.active {
+      border-color: #e1251b;
+      color: #e1251b;
+    }
+
+    .tab-content {
+      padding: 0 16px;
+    }
+
+    .tab-content .item {
+      display: none;
+    }
+
+    .tab-content .item.active {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="tab">
+    <div class="tab-nav">
+      <h3>每日特价</h3>
+      <ul>
+        <li><a class="active" href="javascript:;">精选</a></li>
+        <li><a href="javascript:;">美食</a></li>
+        <li><a href="javascript:;">百货</a></li>
+        <li><a href="javascript:;">个护</a></li>
+        <li><a href="javascript:;">预告</a></li>
+      </ul>
+    </div>
+    <div class="tab-content">
+      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
+      <div class="item"><img src="./images/tab01.png" alt="" /></div>
+      <div class="item"><img src="./images/tab02.png" alt="" /></div>
+      <div class="item"><img src="./images/tab03.png" alt="" /></div>
+      <div class="item"><img src="./images/tab04.png" alt="" /></div>
+    </div>
+  </div>
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script>
+    $(document).ready(function(){
+      // 获取到class为item的div
+      const item=$('div.item')
+      // 获取到所有a标签
+      const li=$('a')
+      // 为a标签添加点击事件
+      li.click(function(){
+        // 获取到最近的a标签，使用parent找到它的父节点li，并使用index去找到li的下标存入target里面
+        let target=$(this).parent().index()
+        // console.log(target);
+        // 去掉a标签中的active
+        li.removeClass('active')
+        // 通过eq方法和target下标找到我们所点击的li然后去添加active
+        li.eq(target).addClass('active')
+        // 下面的item同理
+        item.removeClass('active')
+        item.eq(target).addClass('active')
+      })
+      
+    })
+  </script>
+</body>
+
+</html>
+```
+
+## 轮播图
+
+```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 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)' },
+    ]
+    $(document).ready(function(){
+      // 根据i去获取sliderData数组的下标
+      let i=0
+      // 定义一个函数用来渲染数组
+      function render(r){
+        // 通过下标获取到数组的数据
+        const sd=sliderData[r];
+        // 通过精准制导来获取到img，p，css样式，li的信息并通过数组里的数据将它们更换
+        $('div.slider-wrapper>img').attr('src',sd.url)
+        $('div.slider-footer>p').text(sd.title)
+        $('div.slider-footer').css('backgroundcolor',sd.color)
+        // 定义li用来接收到li的信息，方便使用jquery的删除跟添加方法来删除掉active的样式
+        const li=$('ul.slider-indicator>li')
+        li.removeClass('active')
+        // eq方法是用下标来选择要在第几个li里面添加active样式
+        li.eq(r).addClass('active')
+      }
+
+      // 定义一个用来将轮播图里的信息前进的next函数
+      function next(){
+        // 让我们定义的i每次加1
+        i++;
+        // 如果i大于sliderData数组的长度时将i返回为0，重新回到数组的开头
+        if(i>=sliderData.length){
+          i=0
+        }
+        // 使用render函数来渲染页面
+        render(i);
+      }
+
+      // 通过精准制导来获取前进的按钮，并为这个按钮添加前进的点击事件
+      $('button.next').click(next)
+
+      // 定义一个用来将轮播图里的信息后退的prev函数
+      function prev(){
+        // 因为要后退所以i要每次减1
+        i--;
+        // 数组中下标第一个为0所以当i<0时就会出错了，这时就要设置一个if了当i<0时i就要等于数组的长度-1回到最后一个图片
+        if(i<0){
+          i=sliderData.length-1
+        }
+        // 重新渲染
+        render(i)
+      }
+
+      // 通过精准制导来获取后退的按钮，并为这个按钮添加后退的点击事件
+      $('button.prev').click(prev)
+
+      // 使用mouseenter方法当鼠标移动到前进与后退按钮时停止定时器b
+      $('button.next').mouseenter(function(){
+        clearInterval(b)
+      })
+
+      $('button.prev').mouseenter(function(){
+        clearInterval(b)
+      })
+      // 使用mouseleave方法当鼠标离开到前进与后退按钮时启动定时器b
+      $('button.next').mouseleave(function(){
+        b=setInterval(next,2000)
+      })
+
+      $('button.prev').mouseleave(function(){
+        b=setInterval(next,2000)
+      })
+      // 定义定时器b
+      let b=setInterval(next,2000)
+      
+    })
+  </script>
+</body>
+
+</html>
+~~~
+
-- 
Gitee

