选项卡，轮播图

`###选项卡

function show() {
        const ul = event.currentTarget;
        const li = event.target;
        [...ul.children].forEach(li => li.classList.remove("active"));
        li.classList.add("active");
        const uls = document.querySelectorAll(".content");
        uls.forEach(li => li.classList.remove("active"));
        const content = [...uls].find(ul => ul.dataset.index === li.dataset.index);
        content.classList.add("active");
      }
`

轮播图

const imgs = document.querySelectorAll(".slider .imgs img");
    const btns = document.querySelectorAll(".slider .btns span");
    function setActive() {
      imgs.forEach(img => img.classList.remove("active"));
      btns.forEach(btn => btn.classList.remove("active"));
      event.target.classList.add("active");
      imgs.forEach(img => {
        if (img.dataset.index === event.target.dataset.index) {
          img.classList.add("active");
        }
      });
    }
    setInterval(
      function (arr) {
        let i = arr.shift();
        btns[i].dispatchEvent(new Event("click"));
        arr.push(i);
      },
      2000,
      Object.keys(btns)
    );

轮播图

更多相关文章

随机推荐