博客列表 >选项卡,轮播图

选项卡,轮播图

木子木杉
木子木杉原创
2022年01月11日 10:48:16485浏览

`###选项卡

  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. );
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议