用JavaScript做简易轮播图和选项卡

轮播图

          const bgimg = [
          "1 (1).jpeg",
          "1 (2).jpeg",
          "1 (3).jpeg",
          "1 (4).jpeg",
          "1 (5).jpeg",
          ];
          window.onload = loading;
          // 动态渲染
          function loading() {
          for (i = 0; i < bgimg.length; i++) {
          // 渲染图片
          document
          .querySelector(".box")
          .insertAdjacentHTML(
           "beforeEnd",
           `<img src='${bgimg[i]}' alt='' data-index='${i}'>`
            );
          // 渲染按钮
          document
          .querySelector(".btn")
          .insertAdjacentHTML("beforeEnd", `<span data-index='${i}'></span>`);
        }
        // 给第一张图片和第一个按钮添加默认样式
        let btn = document.querySelectorAll("span");
        let img = document.querySelectorAll("img");
        btn[0].classList.add("select");
        img[0].classList.add("imgselect");
        // 给所有按钮添加事件监听
        btn.forEach((ele) => (ele.onclick = select));
        // 重点：先把所有图片和按钮的样式去掉，再把触发事件的样式和对应的图片加上样式
        function select() {
          btn.forEach((ele) => ele.classList.remove("select"));
          event.target.classList.add("select");
          img.forEach((ele) => {
            ele.classList.remove("imgselect");
            if (ele.dataset.index === event.target.dataset.index) {
              ele.classList.add("imgselect");
            }
          });
        }
        setInterval(
          (ele) => {
            let num = ele.shift();
            btn[num].dispatchEvent(new Event("click"));
            ele.push(num);
          },
          2500,
          Object.keys(btn)
        );
      }

选项卡

      let cardbox = document.querySelectorAll(".title > div");
      let content = document.querySelectorAll("ul");
      cardbox.forEach((ele) => (ele.onclick = show));
      function show() {
        cardbox.forEach((ele) => ele.classList.remove("cardshow"));
        event.target.classList.add("cardshow");
        content.forEach((ele) => {
          ele.classList.remove("show");
          if (ele.dataset.index === event.target.dataset.index) {
            ele.classList.add("show");
          }
        });
      }

常用的数组API

• 添加/删除元素：

  • push(…items) —— 向尾端添加元素，
  • pop() —— 从尾端（删除）提取一个元素，
  • shift() —— 从首端（删除）提取一个元素，
  • unshift(…items) —— 向首端添加元素，
  • splice(pos, deleteCount, …items) —— 从 pos 开始删除 deleteCount 个元素，并插入 items 。
  • slice(start, end) —— 创建一个新数组，将从索引 start 到索引 end （但不包括 end ）的元素复制进去。
  • concat(…items) —— 返回一个新数组：复制当前数组的所有元素，并向其中添加 items 。如果 items 中的任意一项是一个数组，那么就取其元素。

• 搜索元素：

• indexOf/lastIndexOf(item, pos) —— 从索引 pos 开始搜索 item ，搜索到则返回该项的索引，否则返回 -1 。

• includes(value) —— 如果数组有 value ，则返回 true ，否则返回 false 。
• find/filter(func) —— 通过 func 过滤元素，返回使 func 返回 true 的第一个值/所有值。

• findIndex 和 find 类似，但返回索引而不是值。

• 遍历元素：

  • forEach(func) —— 对每个元素都调用 func ，不返回任何内容。

• 转换数组：

  • map(func) —— 根据对每个元素调用 func 的结果创建一个新数组。
  • sort(func) —— 对数组进行原位（in-place）排序，然后返回它。
  • reverse() —— 原位（in-place）反转数组，然后返回它。
  • split/join —— 将字符串转换为数组并返回。
  • reduce/reduceRight(func, initial) —— 通过对每个元素调用 func 计算数组上的单个值，并在调用之间传递中间结果。

  其他：

  • Array.isArray(arr) 检查 arr 是否是一个数组。

      let x = [1, 2, 3, 4, 5, 6];
      //   将一个类数组转为数组
      Array.from(x);
      //   splice(start,[,num,elm,elm1,....,elmn])
      //   从索引0开始，删除三个元素，用两个元素替换
      x.splice(0, 3, "替换1-3", "替换1-3");
      console.log(x);
      // 从索引1开始，删除0个，并在索引1前面插入元素
      x.splice(1, 0, "我插在索引1的前面");
      console.log(x);
      // slice(start [,end])跟字符串api类似，返回开始索引位置，到结束索引（结束索引也被抛弃），如果不填第二个参数，则显示从起始位置到最后索引的所有
      // 不会更改原有数组，只会返回新数组
      console.log("slice()");
      console.log(x.slice(0, 1));
      // concat()跟字符串的api类似，合并数组的元素 ,不会更改原有数组，只会返回新数组
      console.log("concat()");
      console.log(x.concat(["1", "2", "3"], 9, 8, ["7", 6]));
      // indexOf(index [,form])正向查找/lastIndexOf(index [,form]) 反向查找/includes(index [,form]) 判断有没有
      console.log("indexOF()/lastIndexOf()/includes()");
      console.log(x.indexOf(1, 0)); // 如果没有返回-1
      console.log(x.lastIndexOf(5));
      // console.log(includes(10));
      // find(function (item,index,arr)) 返回满足条件的第一个值，没有满足的返回fasle/findindex()跟find基本类似，只不过返回索引
      let y = x.findIndex((item) => item > 5);
      console.log("find()/findindex()");
      console.log(y);
      // filter(function (item,index,arr)) 返回满足条件的数组，push添加进接收的数组
      console.log("filter()");
      let arr3 = x.filter((item) => item > 3);
      console.log(arr3);