search

博客列表 >轮播图/选项卡/数组API

轮播图/选项卡/数组API

吴长清
吴长清原创
2022年08月01日 09:17:39497浏览

1.轮播图

  1. .slider {
  2.     max-width: 750px;
  3.     min-width: 320px;
  4.     margin: auto;
  5.     padding: 0 10px;
  6. }
  7. .slider .imgs {
  8.     /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  9.     max-height: 468px;
  10. }
  11. .slider .imgs img {
  12.     /* 图片完全充满父级空间显示 */
  13.     width: 100%;
  14.     height: 100%;
  15.     /* 图片带有圆角 */
  16.     border-radius: 10px;
  17.     /* 默认图片全部隐藏,只有有active的图片才显示 */
  18.     display: none;
  19. }
  20. /* 默认显示第一张 */
  21. .slider .imgs img.active {
  22.     display: block;
  23. }
  24. /* 轮播图按钮组 */
  25. .slider .btns {
  26.     /* 按钮水平一排显示,用flex,且水平居中 */
  27.     display: flex;
  28.     place-content: center;
  29. }
  30. .slider .btns span {
  31.     /* 鼠标移上去变成小手 */
  32.     cursor: pointer;
  33.     /* 按钮宽高相同,确定显示成一个正圆 */
  34.     width: 10px;
  35.     height: 10px;
  36.     /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  37.     background-color: #333;
  38.     /* 50%可确保显示为正圆 */
  39.     border-radius: 50%;
  40.     /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  41.     margin: -16px 5px 5px;
  42. }
  43. .slider .btns span.active {
  44.     background-color: #fff;
  45. }
  46. .slider .leftRight {
  47.     /* 弹性盒子 */
  48.     display: flex;
  49.     /* 基于剩余空间两端对齐 */
  50.     place-content: space-between;
  51.     /* 按钮上移 */
  52.     margin-top: -234px;
  53. }
  54. .slider .leftRight span {
  55.     /* 鼠标移上去变成小手 */
  56.     cursor: pointer;
  57.     font-size: 35px;
  58.     color: rgba(250, 248, 248, 0.3);
  59. }
  1.     <div class="slider">
  2.       <!-- 图片容器 -->
  3.       <div class="imgs"></div>
  4.       <!-- 切换按钮数量与图片数量必须一致 -->
  5.       <div class="btns"></div>
  6.       <div class="leftRight">
  7.         <span class="iconfont icon-xiangzuo" onclick="setTurnPage(this)" data-index="1"></span>
  8.         <span class="iconfont icon-xiangyou" onclick="setTurnPage(this)" data-index="2"></span>
  9.       </div>
  10.     </div>
  11.     <script>
  12.       //   将所有图片放在一个数组中
  13.       const imgUrls = [
  14.         "images/1.jpeg",
  15.         "images/2.jpeg",
  16.         "images/3.jpeg",
  17.         "images/4.jpeg",
  18.         "images/5.jpeg",
  19.         "images/6.jpeg",
  20.       ];
  21.       //加载时添加元素的方法 动态添加到页面中
  22.       loadElement = () => {
  23.         for (let i = 0; i < imgUrls.length; i++) {
  24.           document
  25.             .querySelector(".imgs")
  26.             .insertAdjacentHTML(
  27.               "beforeend",
  28.               `<a href="#"><img src="${imgUrls[i]}" alt="" data-index="${i + 1}" /></a>`
  29.             );
  30.           document
  31.             .querySelector(".btns")
  32.             .insertAdjacentHTML(
  33.               "beforeend",
  34.               `<span data-index="${i + 1}" onclick="setActive(this)"></span>`
  35.             );
  36.         }
  37.       };
  38.       // 页面加载完成后动态添加元素
  39.       window.addEventListener("load", loadElement, false);
  40.       //声明全局变量
  41.       let imgs = "";
  42.       let btns = "";
  43.       // 因为document.querySelector()执行顺序是在页面加载完成前执行
  44.       // 所以需要延迟加载，等动态添加的元素完成后执行默认显示第一项
  45.       // 定时器 一次性
  46.       setTimeout(() => {
  47.         //  默认显示第一项
  48.         document.querySelector("img").classList.add("active");
  49.         document.querySelector("span").classList.add("active");
  50.         //  得到所有图片和按钮
  51.         imgs = document.querySelectorAll(".slider .imgs img");
  52.         btns = document.querySelectorAll(".slider .btns span");
  53.         //定时器 间歇式
  54.         setInterval(
  55.           (arr) => {
  56.             // 从头部取一个
  57.             let index = arr.shift();
  58.             // 将一个自定义的点击事件,分配给与当前索引对应的按钮上就可以了
  59.             btns[index].dispatchEvent(new Event("click"));
  60.             // 把头部取出来的,再尾部再追加上去
  61.             arr.push(index);
  62.           },
  63.           2000,
  64.           Object.keys(btns)
  65.         );
  66.       }, 50);
  68.       setActive = (ele) => {
  69.         // 1. 清空图片和按钮的状态
  70.         imgs.forEach((img) => img.classList.remove("active"));
  71.         btns.forEach((btn) => btn.classList.remove("active"));
  72.         // 2.根据按钮的自定义data-index的值,来确定应该显示哪一张图片
  73.         // 激活当前按钮
  74.         event.target.classList.add("active");
  75.         [...imgs].find((img) =>
  76.           img.dataset.index === event.target.dataset.index ? img.classList.add("active") : false
  77.         );
  78.       };
  79. </script>

2.选项卡

  1.      /* 初始化 */
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.             outline: none;
  7.         }
  8.         a {
  9.             color: #555;
  10.             text-decoration: none;
  11.         }
  12.         li {
  13.             list-style: none;
  14.         }
  15.         .box {
  16.             width: 980px;
  17.             margin: 10px auto;
  18.             border-radius: 10px;
  19.             box-shadow: 2px 2px 10px #555;
  20.             padding: 10px;
  21.         }
  22.         .box .menu {
  23.             width: 100%;
  24.             height: 40px;
  25.             display: grid;
  26.             grid-template-columns: repeat(3, 1fr);
  27.             text-align: center;
  28.             line-height: 40px;
  29.         }
  30.         .box .menu a:hover,
  31.         .box .menu a.active {
  32.             color: red;
  33.             border-bottom: 3px solid red;
  34.         }
  35.         .box .list {
  36.             height: 250px;
  37.             padding: 10px;
  38.             display: none;
  39.        }
  40.         .box .list.active {
  41.             display: block;
  42.         }
  43.         .box .list:first-of-type .box1 {
  44.             display: grid;
  45.             grid-template-rows: 1fr 30px 1fr 1fr;
  46.             place-items: center;
  47.         }
  48.         .box .list:first-of-type .box1 span {
  49.             place-self: start center;
  50.             font-size: 14px;
  51.             color: rgb(104, 103, 103);
  52.             height: 30px;
  53.         }
  54.         .box .list:first-of-type .box1 .serch {
  55.             display: flex;
  56.         }
  57.         .box .list:first-of-type .box1 .serch .serchInput {
  58.             width: 600px;
  59.             height: 60px;
  60.             background-color: rgb(250, 213, 219);
  61.             line-height: 60px;
  62.             border-radius: 5px 0 0 5px;
  63.             padding: 0 10px;
  64.             color: rgb(104, 103, 103);
  65.             border: none;
  66.         }
  67.         .box .list:first-of-type .box1 .serch .btn {
  68.             width: 90px;
  69.             height: 60px;
  70.             text-align: center;
  71.             color: white;
  72.             background-color: red;
  73.             line-height: 60px;
  74.             border-radius: 0 5px 5px 0;
  75.             cursor: pointer;
  76.         }
  77.         .box .list:first-of-type .box1 .bottom {
  78.             width: 600px;
  79.             display: flex;
  80.             place-content: space-around;
  81.         }
  82.         .box .list:first-of-type .box1 .bottom a {
  83.             width: 85px;
  84.             height: 30px;
  85.             text-align: center;
  86.             border: 1px solid rgb(207, 206, 206);
  87.             border-radius: 10px;
  88.             font-size: 14px;
  89.             line-height: 30px;
  90.         }
  91.         .box .list:first-of-type .box1 .bottom span {
  92.             color: black;
  93.             width: 85px;
  94.             height: 30px;
  95.             text-align: center;
  96.             line-height: 30px;
  97.         }
  98.         .box .list:nth-of-type(2) .box2 {
  99.             display: grid;
  100.             padding: 20px 0;
  101.             grid-template-columns: repeat(4, 200px);
  102.             place-content: space-around;
  103.             gap: 15px;
  104.         }
  105.         .box .list:nth-of-type(2) .box2 .item {
  106.             height: 100px; 
  107.             display: grid;
  108.             background-color: rgba(219, 217, 217, 0.459);
  109.             grid-template-columns: 40px 140px;
  110.             padding: 0 5px;
  111.             border-radius: 10px;
  112.         }
  113.         .box .list:nth-of-type(2) .box2 .item a:first-of-type {
  114.             place-self: center start;
  115.             grid-column: span 2;
  116.         }
  117.         .box .list:nth-of-type(2) .box2 .item a:nth-of-type(2) img {
  118.             width: 40px;
  119.             height: 40px;
  120.             margin: auto;
  121.             border-radius: 40px;
  122.         }
  123.         .box .list:last-of-type .box3 {
  124.             padding: 50px 30px;
  125.             display: flex;
  126.             flex-wrap: wrap;
  127.             gap: 20px;
  128.         }
  129.         .box .list:last-of-type .box3 a {
  130.             padding: 10px;
  131.             height: 0 30px;
  132.             border: 1px solid rgb(207, 206, 206);
  133.             border-radius: 10px;
  134.             font-size: 14px;
  135.             text-align: center;
  136.         }
  137.         .box .list:last-of-type .box3 a:hover {
  138.             background-color: red;
  139.             color: white;
  140.         }
  1. <div class="box">
  2.     <nav class="menu">
  3.         <a href="" class="active" data-index="1">词典查询</a>
  4.         <a href="" data-index="2">全部词典</a>
  5.         <a href="" data-index="3">最近更新</a>
  6.     </nav>
  7.     <!-- 2. 内容列表 -->
  8.     <ul class="list active" data-index="1">
  9.         <div class="box1">
  10.             <h3>编程词典</h3>
  11.             <span>服务码农的在线手册</span>
  12.             <div class="serch">
  13.                 <input class="serchInput" placeholder="请输入查询内容"></input>
  14.                 <div class="btn">搜索</div>
  15.             </div>
  16.             <div class="bottom">
  17.                 <span>热门搜索:</span>
  18.                 <a href="#">PHP</a>
  19.                 <a href="#">MySQL</a>
  20.                 <a href="#">jquery</a>
  21.                 <a href="#">CSS</a>
  22.             </div>
  23.         </div>
  24.     </ul>
  26.     <ul class="list" data-index="2">
  27.         <div class="box2">
  28.             <div class="item">
  29.                 <a href="">【学习php】</a>
  30.                 <a href=""><img src="images/01.png" alt=""></a>
  31.                 <a href="">php是一种被广泛应用的开...</a>
  32.             </div>
  33.             <div class="item">
  34.                 <a href="">【学习php】</a>
  35.                 <a href=""><img src="images/01.png" alt=""></a>
  36.                 <a href="">php是一种被广泛应用的开...</a>
  37.             </div> <div class="item">
  38.                 <a href="">【学习php】</a>
  39.                 <a href=""><img src="images/01.png" alt=""></a>
  40.                 <a href="">php是一种被广泛应用的开...</a>
  41.             </div> <div class="item">
  42.                 <a href="">【学习php】</a>
  43.                 <a href=""><img src="images/01.png" alt=""></a>
  44.                 <a href="">php是一种被广泛应用的开...</a>
  45.             </div> <div class="item">
  46.                 <a href="">【学习php】</a>
  47.                 <a href=""><img src="images/01.png" alt=""></a>
  48.                 <a href="">php是一种被广泛应用的开...</a>
  49.             </div> <div class="item">
  50.                 <a href="">【学习php】</a>
  51.                 <a href=""><img src="images/01.png" alt=""></a>
  52.                 <a href="">php是一种被广泛应用的开...</a>
  53.             </div> <div class="item">
  54.                 <a href="">【学习php】</a>
  55.                 <a href=""><img src="images/01.png" alt=""></a>
  56.                 <a href="">php是一种被广泛应用的开...</a>
  57.             </div> <div class="item">
  58.                 <a href="">【学习php】</a>
  59.                 <a href=""><img src="images/01.png" alt=""></a>
  60.                 <a href="">php是一种被广泛应用的开...</a>
  61.             </div>
  62.         </div>
  63.     </ul>
  65.     <ul class="list" data-index="3">
  66.         <div class="box3">
  67.             <a href="">php arr_diff_assoc()函数</a>
  68.             <a href="">js querySelector()方法</a>
  69.             <a href="">js preventDefault()方法</a>
  70.             <a href="">php arr_diff_assoc()函数</a>
  71.             <a href="">length用法</a>
  72.             <a href="">php arr_diff_assoc()函数</a>
  73.             <a href="">php arr_diff_assoc()函数</a>
  74.             <a href="">数组函数</a>
  75.             <a href="">js preventDefault()方法</a>
  76.             <a href="">php arr_diff_assoc()函数</a>
  77.         </div>
  78.     </ul>
  79. </div>
  1. show = () => {
  2.     // 禁用<a>的默认跳转行为
  3.     event.preventDefault();
  4.     // 获取事件触发者
  5.     const btns = [...event.currentTarget.children];
  6.     // 得到所有list模块
  7.     const lists = document.querySelectorAll(".list");
  8.     // 遍历删除所有active
  9.     btns.forEach((item) => item.classList.remove("active"));
  10.     lists.forEach((item) => item.classList.remove("active"));
  11.     // 给当前事件触发者绑定active
  12.     event.target.classList.add("active");
  13.     // 遍历 满足list与当前事件触发者的自定义属性相等时 绑定active
  14.     [...lists]
  15.         .find((list) => list.dataset.index === event.target.dataset.index)
  16.         .classList.add("active");
  17. };
  18. // 事件冒泡 得到a元素的父级元素 绑定事件 委托父级操作
  19. const menu = document.querySelector(".menu");
  20. // 鼠标悬浮
  21. menu.addEventListener("mouseover", show, false);

3.数组API

  1.  let arr1 = [1, 2, 3, 4, 5];
  2.  let arr2 = ["a", "a", "b", "b"];
  3.  // 1.concat(): 合并数组
  4.  console.log("合并数组: ", arr1.concat(arr2));
  5.  // 2.join(): 将数组的元素按指定符号连接，组成一个新的字符串
  6.  console.log("连接数组内元素: ", arr1.join("-"));
  7.  // 3.reverse(): 数组反序
  8.  console.log("数组反序: ", arr1.reverse());
  9.  // 4.valueOf(): 数组的默认方法
  10.  console.log("数组的默认方法: ", arr2.valueOf());
  11.  // 5.toString(): 将数组转为字符串
  12.  console.log("将数组转为字符串: ", arr2.toString());
  13.  // 6.isArray(): 判读是否为数组
  14.  console.log("判读是否为数组: ", Array.isArray(arr2));

上一条：VMware安装Rocky Linux服务器系统并执行优化下一条：dom增删改，留言板应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多