164 lines
4.4 KiB
HTML
164 lines
4.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<script src="./js/DOMClass.js"></script>
|
||
|
|
<style>
|
||
|
|
#app {
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 820px;
|
||
|
|
height: 380px;
|
||
|
|
background-color: pink;
|
||
|
|
margin: 100px auto;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top {
|
||
|
|
height: 340px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-content {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
/* 轮播 */
|
||
|
|
transition: .4s;
|
||
|
|
/* 过度 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
display: flex;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
color: #424242;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom .item {
|
||
|
|
width: 20%;
|
||
|
|
background-color: #E3E2E2;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom .item.active {
|
||
|
|
color: #cea861;
|
||
|
|
border-bottom: solid 2px #cea861;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="app">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(() => {
|
||
|
|
// 后端放回的数据
|
||
|
|
let dataLbt = [{
|
||
|
|
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg",
|
||
|
|
title: "2022 新赛季新征程"
|
||
|
|
}, {
|
||
|
|
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg",
|
||
|
|
title: "2022 新赛季新征程"
|
||
|
|
}, {
|
||
|
|
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg",
|
||
|
|
title: "2022 新赛季新征程"
|
||
|
|
}, {
|
||
|
|
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg",
|
||
|
|
title: "2022 新赛季新征程"
|
||
|
|
}, {
|
||
|
|
img: "https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg",
|
||
|
|
title: "2022 新赛季新征程"
|
||
|
|
}];
|
||
|
|
|
||
|
|
|
||
|
|
// 渲染页面
|
||
|
|
// top
|
||
|
|
new DOMClass({
|
||
|
|
el: "div",
|
||
|
|
className: "top",
|
||
|
|
elChildren: [{
|
||
|
|
el: "div",
|
||
|
|
className: "box-content",
|
||
|
|
elChildren: dataLbt.map((ite) => ({ el: "img", src: ite.img }))
|
||
|
|
}]
|
||
|
|
}, document.querySelector("#app"));
|
||
|
|
// bottom
|
||
|
|
new DOMClass({
|
||
|
|
el: "div",
|
||
|
|
className: "bottom",
|
||
|
|
elChildren: dataLbt.map((ite) => ({ el: "div", className: "item", innerText: ite.title }))
|
||
|
|
}, document.querySelector("#app"));
|
||
|
|
|
||
|
|
})()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// 旗帜
|
||
|
|
let indexNew = 0; // 现在
|
||
|
|
let indexLod = indexNew; // 过去
|
||
|
|
|
||
|
|
let item = document.querySelectorAll(".bottom .item");
|
||
|
|
let boxContent = document.querySelector(".box-content");
|
||
|
|
let app = document.querySelector("#app");
|
||
|
|
|
||
|
|
item.forEach((el, i) => {
|
||
|
|
el.onclick = () => {
|
||
|
|
view(i);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function view(i) {
|
||
|
|
// 新旗帜改变前 保留为 旧旗帜
|
||
|
|
indexLod = indexNew;
|
||
|
|
// 更改新旗帜
|
||
|
|
indexNew = i;
|
||
|
|
|
||
|
|
// 旧的样式得删掉
|
||
|
|
item[indexLod].classList.remove("active");
|
||
|
|
|
||
|
|
// 添加样式
|
||
|
|
item[indexNew].classList.add("active");
|
||
|
|
|
||
|
|
// 让图片动
|
||
|
|
boxContent.style.left = `${820 * indexNew * -1}px`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 自动轮播
|
||
|
|
let time
|
||
|
|
function zdlb() {
|
||
|
|
time = setInterval(() => {
|
||
|
|
let i = indexNew;
|
||
|
|
i++;
|
||
|
|
// 边界值处理
|
||
|
|
if (i >= item.length) {
|
||
|
|
i = 0;
|
||
|
|
}
|
||
|
|
view(i);
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
zdlb();
|
||
|
|
|
||
|
|
// 移除定时器
|
||
|
|
console.dir(app);
|
||
|
|
app.onmouseenter = () => {
|
||
|
|
clearInterval(time);
|
||
|
|
}
|
||
|
|
// 加上定时器
|
||
|
|
app.onmouseleave = () => {
|
||
|
|
zdlb();
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|