Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js轮播图/选项卡/数组API使用
Blogger Information
Blog 43
fans 4
comment 0
visits 19371
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
js轮播图/选项卡/数组API使用
汇享科技
Original
434 people have browsed it

轮播图

效果图：

代码如下

  1.   <style>
  2.     .box {
  3.       width: 800;
  4.       height: 400;
  5.       /* background-color: aqua; */
  6.       position: relative;
  7.       top: -50px;
  8.     }
  9.     .box img {
  10.       display: none;
  11.     }
  12.     .box .active {
  13.       display: block;
  14.     }
  15.     .box .an {
  16.       display: flex;
  17.       position: relative;
  18.       top: 370px;
  19.       left: 400px;
  20.     }
  21.     .box .an span {
  22.       margin: 0 5px;
  23.       width: 10px;
  24.       height: 10px;
  25.       border: 1px solid;
  26.       background-color: #f1f1f1;
  27.       border-radius: 20px;
  28.     }
  29.     .box an span:hover {
  30.       cursor: pointer;
  31.     }
  32.     .box div .active {
  33.       background-color: #f71711;
  34.     }
  35.     .icon-zuofanye {
  36.       position: relative;
  37.       font-size: 2em;
  38.       top: 200px;
  39.     }
  40.     .icon-youfanye {
  41.       font-size: 2em;
  42.       position: relative;
  43.       top: 200px;
  44.       left: 750px;
  45.     }
  46.     .jian {
  47.       position: relative;
  48.     }
  49.   </style>
  50.   <body>
  51.     <div class="box"></div>
  52.     <script>
  53.       window.onload = (event) => {
  54.         const box = document.querySelector(".box");
  55.         // console.log(event);
  56.         //创建图片数组
  57.         const imgs = ["lunbo1.jpg", "lunbo2.jpg", "lunbo3.jpg", "lunbo4.jpg"];
  58.         //创建页面元素
  59.         const btn = document.createElement("div");
  60.         //追加到box中
  61.         box.insertAdjacentHTML("beforeEnd", '<div class="an"></div>');
  62.         //
  63.         // 创建按钮盒子
  64.         let b = document.querySelector(".box .an");
  65.         // 通过循环将元素进行追加到页面中
  66.         box.insertAdjacentHTML("beforeEnd", '<div class="jian"></div>');
  67.         for (let i = 0; i < imgs.length; i++) {
  68.           const img = document.createElement("img");
  69.           box.append(img);
  70.           let a = document.querySelectorAll("img");
  71.           const s = document.createElement("span");
  72.           b.append(s);
  73.           let span1 = document.querySelectorAll(".box div span");
  74.           //   console.log(span1);
  75.           //   console.log(object);
  76.           //遍历所有img并添加自定义属性data-index
  77.           a.forEach((a, k) => {
  78.             a.src = "images/" + imgs[k];
  79.             a.setAttribute("data-index", k + 1);
  80.           });
  81.           span1.forEach((s, k) => {
  82.             s.setAttribute("data-index", k + 1);
  83.           });
  84.         }
  85.         const btnsa = document.querySelectorAll("span");
  86.         const imga = document.querySelectorAll("img");
  87.         imga[0].classList.add("active");
  88.         btnsa[0].classList.add("active");
  89.         btnsa.forEach((btn, k) => {
  90.           btn.onclick = function () {
  91.             btnsa.forEach((btn) => btn.classList.remove("active"));
  92.             btn.classList.add("active");
  94.             imga.forEach((img) => {
  95.               img.classList.remove("active");
  96.               if (btn.dataset.index == img.dataset.index) {
  97.                 img.classList.add("active");
  98.               }
  99.             });
  100.           };
  101.         });
  102.         setInterval(
  103.           (arr) => {
  104.             let index = arr.shift();
  105.             //   console.log(arr);
  106.             //   将一个自定义的点击事件,分配给与当前索引对应的按钮上就可以了
  107.             btnsa[index].dispatchEvent(new Event("click"));
  108.             // 把头部取出来的,再尾部再追加上去
  109.             arr.push(index);
  110.           },
  111.           2000,
  112.           Object.keys(btnsa)
  113.         );
  114.         const jiantou = document.querySelector(".jian");
  116.         for (let i = 0; i < 2; i++) {
  117.           const jiantou1 = document.createElement("a");
  118.           jiantou.append(jiantou1);
  119.         }
  120.         const jt1 = document.querySelector(".box .jian a:first-of-type");
  121.         const jt2 = document.querySelector(".box .jian a:last-of-type");
  122.         // console.log(jt1);
  123.         jt1.classList.add("iconfont");
  124.         jt1.classList.add("icon-zuofanye");
  125.         jt2.classList.add("iconfont");
  126.         jt2.classList.add("icon-youfanye");
  127.         jt1.onclick = function () {
  128.           // console.log(Object.keys(btnsa));
  129.           let clickspan = Array.from(btnsa).filter(
  130.             (item) => item.classList.contains("active") == true
  131.           );
  132.           let k = clickspan[0].dataset.index - 1;
  134.           if (k === 0) {
  135.             btnsa[3].click();
  136.           } else {
  137.             btnsa[(k -= 1)].click();
  138.           }
  139.         };
  140.         jt2.onclick = function () {
  141.           // console.log(Object.keys(btnsa));
  142.           let clickspan = Array.from(btnsa).filter(
  143.             (item) => item.classList.contains("active") == true
  144.           );
  145.           let k = parseInt(clickspan[0].dataset.index) - 1;
  146.           // console.log(k);
  148.           if (k === 3) {
  149.             btnsa[0].click();
  150.             // console.log(btnsa);
  151.           } else {
  152.             // console.log(k);
  153.             btnsa[(k += 1)].click();
  154.           }
  155.         };

选项卡

效果演示：

代码如下：

  1.     <style>
  2.       .cont {
  3.         width: 200px;
  4.         height: 200px;
  5.         text-align: center;
  6.         background-color: aqua;
  7.         display: none;
  8.       }
  9.       .active {
  10.         display: block;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <button data-index="1">界面1</button>
  16.     <button data-index="2">界面2</button>
  17.     <button data-index="3">界面3</button>
  18.     <div class="cont active" data-index="1">界面1</div>
  19.     <div class="cont" data-index="2">界面2</div>
  20.     <div class="cont" data-index="3">界面3</div>
  21.   </body>
  1.   <script>
  2.     const btn = document.querySelectorAll("button");
  3.     const div = document.querySelectorAll("div");
  4.     console.log(div[0]);
  6.     div[1].classList.add = "active";
  7.     btn.forEach(function (btn) {
  8.       btn.onclick = function () {
  9.         div.forEach(function (div) {
  10.           div.style.display = "none";
  11.           if (btn.dataset.index === div.dataset.index) {
  12.             div.style.display = "block";
  13.           }
  14.         });
  15.       };
  16.     });
  17.   </script>

数组API

  1.       let arr = [1, 2, 3, 4, 5, 6, 7];
  2.       // Array.isArray()判断是否为一个数组
  3.       console.log(Array.isArray(arr));
  4.       console.log("---------");
  5.       let arr1 = [5, 6, 7, 8];
  6.       //   concat()合并数组将两个数组合并并返回一个新数组
  7.       let arrs = arr.concat(arr1);
  8.       console.log(arrs);
  9.       console.log("----------");
  10.       //   at()根据索引返回对应的值
  11.       console.log(arr.at(3));
  12.       //   copyWithin()复制部分数组并返回一个新数组不会改变原数组
  13.       let arr2 = arr.copyWithin(3, 1, 3);
  14.       console.log(arr2);
  15.       console.log("---------------");
  16.       //   flat()递归遍历数组 将数组中的元素和子数组足称一个新的数组返回
  17.       let arr3 = [1, 2, 3, "a", ["a", "b"]];
  18.       let arr3a = arr3.flat();
  19.       console.log(arr3a);
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