多层选项卡轮播es6写法
<!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>
* {
margin: 0;
padding: 0;
font-family: "microsoft yahei", serif;
}
li {
list-style-type: none;
}
#box {
position: relative;
width: 428px;
height: 204px;
margin: 50px auto;
}
#box .left {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 204px;
background-color: rgba(0, 0, 0, .3)
}
#box .left>li {
width: 100%;
height: 30px;
line-height: 30px;
background-color: #000;
color: #fff;
text-align: center;
font-size: 12px;
margin-bottom: 1px;
cursor: pointer;
}
#box .left>li.on {
background-color: #f60;
}
#box .right {
position: absolute;
top: 0;
right: 0;
width: 326px;
height: 204px;
background-color: pink;
}
#box .right>li {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#box .right>li.on {
display: block;
}
#box .right .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#box .right .img>li {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#box .right .img>li.on {
display: block;
}
#box .right .img>li img {
display: block;
width: 100%;
height: 100%;
}
#box .right .tab {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 25px;
line-height: 25px;
}
#box .right .tab>li {
float: left;
width: 25px;
height: 25px;
margin: 0 5px;
font-size: 12px;
background-color: rgba(0, 0, 0, .6);
color: #fff;
text-align: center;
cursor: pointer;
}
#box .right .tab>li.on,
#box left>li.on {
background-color: #f60;
}
</style>
</head>
<body>
<div id="box">
<ul class="left">
<li class="on">豪车</li>
<li>美味</li>
<li>美女风景</li>
</ul>
<ul class="right">
<li class="list on">
<ul class="img img1">
<li class="on"><img src="img2/1.jpg" alt=""></li>
<li><img src="img2/2.jpg" alt=""></li>
<li><img src="img2/3.jpg" alt=""></li>
<li><img src="img2/4.jpg" alt=""></li>
</ul>
<ul class="tab tab1">
<li class="on"> 1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li class="list">
<ul class="img img2">
<li class="on"><img src="img2/m1.jpg" alt=""></li>
<li><img src="img2/m2.jpg" alt=""></li>
<li><img src="img2/m3.jpg" alt=""></li>
<li><img src="img2/m4.jpg" alt=""></li>
<li><img src="img2/m5.jpg" alt=""></li>
</ul>
<ul class="tab tab2">
<li class="on"> 1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li class="list">
<ul class="img img3">
<li class="on"><img src="img2/s1.jpg" alt=""></li>
<li><img src="img2/s2.jpg" alt=""></li>
<li><img src="img2/s3.jpg" alt=""></li>
<li><img src="img2/s4.jpg" alt=""></li>
<li><img src="img2/s5.jpg" alt=""></li>
</ul>
<ul class="tab tab3">
<li class="on"> 1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</div>
<script>
//获取元素
let oBox = document.getElementById('box');
//左侧li与右侧li形成一一对应的关系
let aLeftLi = [...oBox.querySelectorAll('.left li')],
aRightLi = oBox.querySelectorAll('.right>li')
//信号量
let idx = 0;
//批量绑定事件
aLeftLi.forEach((oLeftLi, index) => {
//拿到每一个oLeftLi,index对应的索引
oLeftLi.onmouseenter = function () {//鼠标移入事件
if (index == idx) return;//频繁移入自己时要节流
aLeftLi[idx].classList.remove('on')//移除之前的idx对应的oLeftLi
aRightLi[idx].classList.remove('on');
idx = index;
aLeftLi[idx].classList.add('on');
aRightLi[idx].classList.add('on');
console.log(index);
//移入就加on类名
}
})
//第二部分右侧图片和tab的切换
let aImg = [...document.getElementsByClassName('img')],
aTab = [...document.getElementsByClassName('tab')]
//定义变量
let allImgLi = [], allTabLi = [];
aImg.forEach((oImg, index) => {// 外层ul
allImgLi[index] = [...oImg.getElementsByTagName('li')]
allTabLi[index] = [...aTab[index].getElementsByTagName('li')]
allTabLi[index].showJ = 0;//信号量 每组默认显示图片是第几个
//批量给每一个tab添加事件
allTabLi[index].forEach((oTab, ind) => {
oTab.onmouseenter = function () { //这里要考虑内层外层索引 index ind
let y = allTabLi[index].showJ//当前索引存起来
if (y == ind) return //节流
allTabLi[index][y].classList.remove('on');
allImgLi[index][y].classList.remove('on');
allTabLi[index].showJ = y = ind;
allImgLi[index][y].classList.add('on');
allTabLi[index][y].classList.add('on')
}
})
})
console.log(allImgLi)
console.log(allTabLi)
</script>
</body>
</html>
ES5添加删除类名需要切割数组拼接数组，ES6使用classList
<!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>
</style>
</head>
<body>
<div class="cc ee wrap bb" id="box">
</div>
<script>
// ES5添加删除类名需要切割数组拼接数组，ES6使用classList
let className = box.className.split(' ')
console.log(className);
className.push('aa')
console.log(className)
box.className = className.join(' ');//ES5添加类名
// console.log(box.className)
//删除wrap类名要使用查询
let index = className.indexOf('wrap');//能查到返回数值
console.log(index)
if (index >= 0) {
className.splice(index, 1)
}
console.log(className)
box.className = className.join(' ');
</script>
</body>
</html>
网友评论