landaiqing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
landaiqing
2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
Html-Javascript/轮播图/index-传统.html Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: salmon;
margin: 100px auto;
overflow: hidden;
}
.top {
position: relative;
height: 340px;
}
.box-content{
position: absolute;
display: flex;
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/20220222/132b7dea7a8ff48b44abbfc1bbaf4239.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220223/bf4d1c076c6e039e46f9b723c60c0820.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220227/b17b2308283beb3d3b20550d6a6cec3f.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220217/9168da7e2fde10dfdb6a577f910daa90.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220214/8d334a73733222ee93e89b3863069a70.jpeg" alt="">
</div>
</div>
<div class="bottom">
<div class="item active">神话级小小英雄</div>
<div class="item">2022金虎贺岁</div>
<div class="item">海克斯冠军杯</div>
<div class="item">云顶宝典 霓虹宝库</div>
<div class="item">洛与霞雕塑 预定开启</div>
</div>
</div>
<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();
//移除定时器
app.onmouseenter =()=>{
clearInterval(time);
}
//加上定时器
app.onmouseleave= ()=>{
zdlb();
}
</script>
</body>
</html>

174
Html-Javascript/轮播图/index-类.html Normal file
View File

@@ -0,0 +1,174 @@
<!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>
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>