选项卡,轮播图
程序员文章站
2022-03-06 13:25:21
...
`###选项卡
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)
);
上一篇: php用什么框架最多
下一篇: 2021年的PHP,不负众望