248 lines
6.9 KiB
HTML
248 lines
6.9 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>
|
|
<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 class="top">
|
|
<div class="box-content">
|
|
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg"
|
|
alt="">
|
|
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg"
|
|
alt="">
|
|
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg"
|
|
alt="">
|
|
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg"
|
|
alt="">
|
|
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg"
|
|
alt="">
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="item active">2022 新赛季新征程</div>
|
|
<div class="item">2022 新赛季新征程</div>
|
|
<div class="item">2022 新赛季新征程</div>
|
|
<div class="item">2022 新赛季新征程</div>
|
|
<div class="item">2022 新赛季新征程</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
|
|
<script>{
|
|
//如何用js代码 生成这样的结构
|
|
|
|
//后端放回的数据
|
|
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 新赛季新征程"
|
|
}];
|
|
//用数据 生成结构
|
|
//创建dom
|
|
//top大盒子
|
|
let topX=document.createElement("div");
|
|
topX.className = "top";
|
|
//图片容器盒子
|
|
let boxContent= document.createElement("div");
|
|
boxContent.className = "box-content";
|
|
//循环生成图片
|
|
for(let index =0;index<dataLbt.length;index++ ){
|
|
//当前项
|
|
const element = dataLbt[index];
|
|
let img = document.createElement("img");
|
|
//放入图片地址
|
|
img.src=element.img;
|
|
//给图片找容器
|
|
boxContent.appendChild(img);
|
|
}
|
|
|
|
console.log(topX);
|
|
//将一个盒子放入另一个盒子
|
|
// 父.appendChild(子);
|
|
topX.appendChild(boxContent);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//bottom
|
|
let bottom=document.createElement("div");
|
|
bottom.className = "bottom";
|
|
|
|
for(let index =0;index<dataLbt.length;index++ ){
|
|
//当前项
|
|
const element = dataLbt[index];
|
|
|
|
let item=document.createElement("div");
|
|
item.className = "item";
|
|
item.innerText=element.title;
|
|
bottom.appendChild(item);
|
|
|
|
}
|
|
let app =document.querySelector("#app");
|
|
//放入上面部分
|
|
app.appendChild(topX);
|
|
app.appendChild(bottom);
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
class Lbt {
|
|
constructor() {
|
|
this._indexNew = 0;
|
|
this.time = null;
|
|
// dom
|
|
this.item = document.querySelectorAll(".bottom .item");
|
|
this.boxContent = document.querySelector(".box-content");
|
|
this.app = document.querySelector("#app");
|
|
// 添加点击事件
|
|
this.item.forEach((el, i) => {
|
|
el.onclick = () => {
|
|
// 更改新旗帜
|
|
this.indexNew = i;
|
|
}
|
|
})
|
|
|
|
// 自动轮播
|
|
this.zdlb();
|
|
|
|
// 移除定时器
|
|
this.app.onmouseenter = () => {
|
|
clearInterval(this.time);
|
|
}
|
|
// 加上定时器
|
|
this.app.onmouseleave = () => {
|
|
this.zdlb();
|
|
}
|
|
// 被监听 属性 不要放在最前头
|
|
this.indexNew = 0;
|
|
}
|
|
// 视图
|
|
view = function (i, lodI) {
|
|
// 旧的样式得删掉
|
|
this.item[lodI].classList.remove("active");
|
|
|
|
// 添加样式
|
|
this.item[i].classList.add("active");
|
|
|
|
// 让图片动
|
|
this.boxContent.style.left = `${820 * i * -1}px`;
|
|
}
|
|
// 自动轮播方法
|
|
zdlb = () => {
|
|
this.time = setInterval(() => {
|
|
let i = this.indexNew;
|
|
i++;
|
|
// 边界值处理
|
|
if (i >= this.item.length) {
|
|
i = 0;
|
|
}
|
|
// 更改新旗帜
|
|
this.indexNew = i;
|
|
}, 1000);
|
|
}
|
|
|
|
set indexNew(val) {
|
|
// 更改新旗帜
|
|
this.view(val, this._indexNew);
|
|
this._indexNew = val;
|
|
}
|
|
get indexNew() {
|
|
return this._indexNew;
|
|
}
|
|
}
|
|
|
|
|
|
let l = new Lbt();
|
|
|
|
|
|
|
|
// // 旗帜
|
|
// let indexNew = 0; // 现在
|
|
// let indexLod = indexNew; // 过去
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |