Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 轮播图和选项卡
Blogger Information
Blog 37
fans 0
comment 0
visits 14357
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
轮播图和选项卡
秋闲独醉
Original
375 people have browsed it

轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>轮播图</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       .silder {
  15.         width: 400px;
  16.         margin: 10px auto;
  17.       }
  18.       .images img {
  19.         width: 100%;
  20.         display: none;
  21.       }
  22.       .images img.active {
  23.         display: block;
  24.       }
  25.       .btns {
  26.         display: flex;
  27.         place-content: center;
  28.       }
  29.       .btns span {
  30.         width: 10px;
  31.         height: 10px;
  32.         border-radius: 50%;
  33.         background-color: gray;
  34.         margin: -20px 5px 5px;
  35.       }
  36.       .btns span.active {
  37.         background-color: yellow;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="silder">
  43.       <div class="images"></div>
  44.       <div class="btns"></div>
  45.     </div>
  46.     <script>
  47.       // 3. 在页面初始化时,自动加载以上内容,事件是 load
  48.       window.addEventListener("load", fun, false);
  49.       let imageArr = ["banner-1.jpg", "banner-2.jpg", "banner-3.jpg", "banner-4.jpg"];
  50.       const images = document.querySelector(".silder .images");
  51.       const btns = document.querySelector(".btns");
  52.       function fun() {
  53.         imageArr.forEach(function (item, index) {
  54.           if (index == 0) {
  55.             // 1. 将所有图片放在一个数组中, 并动态添加到页面中
  56.             images.insertAdjacentHTML("beforeend", `<a href="#"><img src="./images/${item}" alt=" " class="active" data-index=${index}></a>`);
  57.             // 2. 根据图片数量,动态创建按钮组,并动态添加到页面中
  58.             btns.insertAdjacentHTML("beforeend", `<span class="active" data-index="${index}"></span>`);
  59.           } else {
  60.             // 1. 将所有图片放在一个数组中, 并动态添加到页面中
  61.             images.insertAdjacentHTML("beforeend", `<a href="#"><img src="./images/${item}" alt=" " data-index=${index}></a>`);
  62.             // 2. 根据图片数量,动态创建按钮组,并动态添加到页面中
  63.             btns.insertAdjacentHTML("beforeend", `<span  data-index="${index}"></span>`);
  64.           }
  65.         });
  66.         // console.log(document.body);
  67.         // console.log(imageArr);
  68.         const imgs = document.querySelectorAll(".silder .images img");
  69.         const btns2 = document.querySelectorAll(".silder .btns span");
  70.         btns.addEventListener("click", fun2, false);
  71.         // console.log(imgs, btns2);
  72.         function fun2() {
  73.           //   console.log(event.target);
  74.           btns2.forEach(function (item) {
  75.             item.classList.remove("active");
  76.           });
  77.           //   console.log(event.target);
  78.           //   console.log(event.currentTarget);
  79.           imgs.forEach((item) => item.classList.remove("active"));
  80.           event.target.classList.add("active");
  81.           //   console.log(event.target.dataset.index);
  82.           //   console.log(imgs);
  83.           imgs.forEach((item) => {
  84.             // console.log(item.dataset.index);
  85.             if (item.dataset.index === event.target.dataset.index) {
  86.               item.classList.add("active");
  87.             }
  88.           });
  89.         }
  90.         // 4. [选做]: 为轮播图添加翻页按钮,提供翻页功能,提示:参考定时播放
  91.         setInterval(
  92.           function (arr) {
  93.             // console.log(arr);
  94.             let index = arr.shift();
  95.             // btns2[index].dispatchEvent(new Event("click"));
  96.             btns2[index].click();
  97.             arr.push(index);
  98.             // console.log(arr);
  99.           },
  100.           3000,
  101.           Object.keys(btns2)
  102.         );
  103.       }
  104.     </script>
  105.     <script>
  106.       // 6. 任选5个课程上没讲过的数组方法,实例演示
  107.       let arr1 = [3, 4, 1, 5];
  108.       let arr2 = [9, 3, 4, 1];
  109.       console.log("concat() 连接两个或多个数组：" + arr1.concat(arr2));
  110.       const obj = arr1.entries();
  111.       console.log("entries()返回一个新的 Array Iterator 对象:" + obj.next().value);
  112.       //arr.fill(value[, start[, end]]),会修改原数组
  113.       console.log(arr1.fill(9));
  114.       console.log(arr1.fill(8, 2));
  115.       console.log(arr1.fill(7, 1, 3));
  116.       //arr.includes(valueToFind[, fromIndex])
  117.       console.log(arr2.includes(4));
  118.       console.log(arr2.includes(3, 2));
  119.       //arr.reverse() 返回颠倒后的数组
  120.       console.log(arr2.reverse());
  121.       //arr.keys 返回数组的键组成的Array Iterator对象。
  122.       const iterator = arr2.keys();
  123.       for (const key of iterator) {
  124.         console.log(key);
  125.       }
  126.     </script>
  127.   </body>
  128. </html>

仿写php中文网编程词典选项卡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>// 5. 仿写php中文网编程词典选项卡</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body > div {
  15.         width: 400px;
  16.         margin-top: 20px;
  17.         /* display: grid; */
  18.         /* place-content: center; */
  19.       }
  20.       .list {
  21.         display: grid;
  22.         grid-template-columns: repeat(3, 100px);
  23.         grid-auto-rows: 40px;
  24.         place-content: space-evenly;
  25.         place-items: center;
  26.         font-size: large;
  27.         margin: auto;
  28.       }
  29.       .list .btn {
  30.         background-color: green;
  31.         width: 80px;
  32.         height: 30px;
  33.         text-align: center;
  34.         border-radius: 10px;
  35.       }
  36.       .list .active {
  37.         background-color: purple;
  38.         cursor: pointer;
  39.       }
  40.       .list .active:hover,
  41.       .content .item:hover {
  42.         cursor: pointer;
  43.       }
  44.       .content {
  45.         width: 350px;
  46.         height: 300px;
  47.         position: fixed;
  48.         top: 70px;
  49.         left: 25px;
  50.       }
  51.       .content .item {
  52.         width: 350px;
  53.         height: 300px;
  54.         text-align: center;
  55.         display: none;
  56.       }
  57.       .item.active {
  58.         display: block;
  59.       }
  60.       .content div:first-of-type {
  61.         background-color: red;
  62.       }
  63.       .content div:nth-of-type(2) {
  64.         background-color: yellow;
  65.       }
  66.       .content div:last-of-type {
  67.         background-color: orange;
  68.       }
  69.     </style>
  70.   </head>
  71.   <body>
  72.     <div>
  73.       <div class="list">
  74.         <div class="btn active" data-index="1">按钮1</div>
  75.         <div class="btn" data-index="2">按钮2</div>
  76.         <div class="btn" data-index="3">按钮3</div>
  77.       </div>
  78.       <div class="content">
  79.         <div class="item active" data-index="1">内容1</div>
  80.         <div class="item" data-index="2">内容2</div>
  81.         <div class="item" data-index="3">内容3</div>
  82.       </div>
  83.     </div>
  84.     <script>
  85.       //   const list = document.querySelector(".list");
  86.       const lists = document.querySelectorAll(".list .btn");
  87.       //   console.log(lists);
  88.       const contents = document.querySelectorAll(".content .item");
  89.       //   console.log(contents);
  90.       lists.forEach((item, index) => item.addEventListener("click", fun, false));
  92.       function fun() {
  93.         lists.forEach((item, index) => item.classList.remove("active"));
  94.         event.currentTarget.classList.add("active");
  95.         contents.forEach((item, index) => item.classList.remove("active"));
  96.         contents.forEach((item, index) => {
  97.           if (item.dataset.index == event.currentTarget.dataset.index) {
  98.             item.classList.add("active");
  99.           }
  100.         });
  101.       }
  102.     </script>
  103.   </body>
  104. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post