欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

选项卡,轮播图

程序员文章站 2022-03-06 13:25:21
...

`###选项卡

  1. function show() {
  2. const ul = event.currentTarget;
  3. const li = event.target;
  4. [...ul.children].forEach(li => li.classList.remove("active"));
  5. li.classList.add("active");
  6. const uls = document.querySelectorAll(".content");
  7. uls.forEach(li => li.classList.remove("active"));
  8. const content = [...uls].find(ul => ul.dataset.index === li.dataset.index);
  9. content.classList.add("active");
  10. }
  11. `

轮播图

  1. const imgs = document.querySelectorAll(".slider .imgs img");
  2. const btns = document.querySelectorAll(".slider .btns span");
  3. function setActive() {
  4. imgs.forEach(img => img.classList.remove("active"));
  5. btns.forEach(btn => btn.classList.remove("active"));
  6. event.target.classList.add("active");
  7. imgs.forEach(img => {
  8. if (img.dataset.index === event.target.dataset.index) {
  9. img.classList.add("active");
  10. }
  11. });
  12. }
  13. setInterval(
  14. function (arr) {
  15. let i = arr.shift();
  16. btns[i].dispatchEvent(new Event("click"));
  17. arr.push(i);
  18. },
  19. 2000,
  20. Object.keys(btns)
  21. );