From 0159445e67a640a400b90ad80d64c8b55dbe0120 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A2=853?=
 <12071605+yangmei3@user.noreply.gitee.com>
Date: Thu, 14 Dec 2023 04:56:54 +0000
Subject: [PATCH] 20231213
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 杨梅3 <>
---
 ...50\275\256\346\222\255\357\274\214tab.txt" | 425 ++++++++++++++++++
 1 file changed, 425 insertions(+)
 create mode 100644 "27  \346\235\250\346\242\205/\350\275\256\346\222\255\357\274\214tab.txt"
diff --git "a/27  \346\235\250\346\242\205/\350\275\256\346\222\255\357\274\214tab.txt" "b/27  \346\235\250\346\242\205/\350\275\256\346\222\255\357\274\214tab.txt"
new file mode 100644
index 0000000..06e745f
--- /dev/null
+++ "b/27  \346\235\250\346\242\205/\350\275\256\346\222\255\357\274\214tab.txt"	
@@ -0,0 +1,425 @@
+
+#### 轮播图：
+
+```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>
+$(document).ready(function(){
+
+
+
+// 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)' },
+    ]
+    // 获取元素
+    let img=document.querySelector('.slider-wrapper img')
+    let p=document.querySelector('.slider-footer p')
+    let footer=document.querySelector('.slider-footer')
+    // let prebtn=document.querySelector('.toggle .prev')
+    // let nextbtn=document.querySelector('.toggle .next')
+   
+
+
+    // 定义一个全局的图片位置的变量
+    let num=0
+    
+   
+    // 先用定时器让其自动转换
+   let timer= setInterval(function(){
+      // nextbtn.click();
+      $('.toggle .next')[0].click();
+    },1000)
+
+    
+    // 鼠标移动到图片，就暂时滚动
+    img.addEventListener('mouseenter',function(){
+      clearInterval(timer)
+    })
+    img.addEventListener('mouseleave',function(){
+      timer= setInterval(function(){
+        $('.toggle .next')[0].click();
+    },1000)
+    })
+  
+    // 下一页
+    $('.toggle .next').click(function(){
+    num++;
+    if(num>=data.length){
+      num=0}
+    img.src=data[num].url
+    p.innerHTML=data[num].title
+    footer.style.backgroundColor =data[num].color
+    // document.querySelector('.slider-indicator .active').classList.remove('active')
+    $('.slider-indicator .active')[0].classList.remove('active')
+    // document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+    $(`.slider-indicator li:nth-child(${num+1})`)[0].classList.add('active')
+   })
+
+
+    // 上一页
+    $('.toggle .prev').click(function(){
+    num--;
+    if(num<0){
+      num=data.length}
+    img.src=data[num].url
+    p.innerHTML=data[num].title
+    footer.style.backgroundColor =data[num].color
+    // document.querySelector('.slider-indicator .active').classList.remove('active')
+    $('.slider-indicator .active')[0].removeClass('active')
+    // document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+    $(`.slider-indicator li:nth-child(${num+1})`)[0].addClass('active')
+   })
+   
+
+
+
+
+//原生代码
+// // 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)' },
+//     ]
+//     // 获取元素
+//     let img=document.querySelector('.slider-wrapper img')
+//     let p=document.querySelector('.slider-footer p')
+//     let footer=document.querySelector('.slider-footer')
+//     let prebtn=document.querySelector('.toggle .prev')
+//     let nextbtn=document.querySelector('.toggle .next')
+   
+
+
+//     // 定义一个全局的图片位置的变量
+//     let num=0
+    
+   
+//     // 先用定时器让其自动转换
+//    let timer= setInterval(function(){
+//       nextbtn.click();
+//     },1000)
+
+    
+//     // 鼠标移动到图片，就暂时滚动
+//     img.addEventListener('mouseenter',function(){
+//       clearInterval(timer)
+//     })
+//     img.addEventListener('mouseleave',function(){
+//       timer= setInterval(function(){
+//       nextbtn.click();
+//     },1000)
+//     })
+  
+//     // 下一页
+//    nextbtn.addEventListener('click',function(){
+//     num++;
+//     if(num>=data.length){
+//       num=0}
+//     img.src=data[num].url
+//     p.innerHTML=data[num].title
+//     footer.style.backgroundColor =data[num].color
+//     document.querySelector('.slider-indicator .active').classList.remove('active')
+//     document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+//    })
+
+
+//     // 上一页
+//     prebtn.addEventListener('click',function(){
+//     num--;
+//     if(num<0){
+//       num=data.length}
+//     img.src=data[num].url
+//     p.innerHTML=data[num].title
+//     footer.style.backgroundColor =data[num].color
+//     document.querySelector('.slider-indicator .active').classList.remove('active')
+//     document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+//    })
+
+})
+  </script>
+</body>
+```
+
+#### tab 栏切换:
+
+```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(){
+
+     //获取所有最上面的标题（精选、美食、、百货、个护、预告），‘ ’空格代表下一级
+  let a = document.querySelectorAll('.tab-nav a');
+// console.log($('.tab-nav a'));
+    //   console.log(a);效果如下
+    //   NodeList(5) [a.active, a, a, a, a]
+    // 0: a.active
+    // 1: a
+    // 2: a
+    // 3: a
+    // 4: a
+    // length: 5
+    // [[Prototype]]: NodeList
+
+  //获取所有的照片
+    let img = document.querySelectorAll('.tab-content .item');
+      // console.log(img);效果如下
+      // NodeList(5) [div.item.active, div.item, div.item, div.item, div.item]
+      // 0: div.item.active
+      // 1: div.item
+      // 2: div.item
+      // 3: div.item
+      // 4: div.item
+      // length: 5
+      // [[Prototype]]: NodeList
+
+      
+    for(let i=0;i<a.length;i++){
+      //因为之前是一次获取所有的值，所以a和img是数组
+      //现在要把数据拿出来，使用for循环是因为不仅可以全部拿出来，还节省代码
+      let arr = a[i];
+      let irr = img[i];
+      //给标题添加鼠标挪动触发事件
+      arr.addEventListener('mouseenter',function(){
+        //将原来的a标签添加的active给删除，使得去掉触发效果（标题变红并添加下划线）
+        // document.querySelector('.tab-nav .active').classList.remove('active');
+        $('.tab-nav .active')[0].classList.remove('active');
+
+        //当你的鼠标挪动其他的标题时，展现触发效果（标题变红并添加下划线）
+        arr.classList.add('active');
+
+        //将原来的照片添加的active给删除，使得去掉触发效果（将照片不显示）
+        // document.querySelector('.tab-content .active').classList.remove('active');
+        $('.tab-content .active')[0].classList.remove('active');
+
+        //当你的鼠标挪动其他的标题时，展现触发效果（相应的照片出现）
+        irr.classList.add('active');
+      })
+    }
+  })
+ 
+</script>
+</body>
+
+```
\ No newline at end of file
-- 
Gitee

