标签：hw12 classList smalls js width length let big
- 标签页效果-鼠标滑过高亮的菜单选择效果
<!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>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: black;
}
.example {
width: 300px;
height: 200px;
background-color: pink;
margin: 200px auto;
border-radius: 10px;
}
ul {
background-color: green;
display: flex;
border: 1px solid green;
border-radius: 10px;
}
li {
text-align: center;
background-color: gray;
flex: 1;
list-style: none;
border: 1px solid green;
border-radius: 10px;
}
.content {
background-color: pink;
width: 300px;
}
.box {
background-color: pink;
display: none;
}
.active {
display: block;
}
.high {
background-color: yellow;
}
</style>
</head>
<body>
<div class="example">
<ul>
<li class="high">a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="content">
<div class="active box">a</div>
<div class="box">b</div>
<div class="box">c</div>
</div>
</div>
<script>
; (function () {
lis = document.querySelectorAll("ul li");
boxs = document.querySelectorAll(".box");
//console.log(boxs);
lis.forEach((li, index) => {
li.addEventListener('mouseover', function (e) {
ul = e.target.parentElement
let ans = -1;
for (let i = 0; i < ul.children.length; i++) {
if (ul.children[i].classList.contains("high")) {
ul.children[i].classList.remove("high")
boxs[i].classList.remove("active")
}
if (e.target === ul.children[i]) {
ans = i;
}
}
boxs[ans].classList.add("active")
e.target.classList.add("high")
})
})
}())
</script>
</body>
</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>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bigBox {
position: relative;
margin: 10px auto;
width: 1000px;
}
.big {
width: 1000px;
height: 562.5px;
opacity: 100%;
transition: opacity 1s;
}
.smallBox {
margin: 10px auto;
width: 400px;
font-size: 0;
}
.small {
width: 100px;
height: 56.25px;
}
.toggle {
opacity: 0%;
}
</style>
</style>
</head>
<body>
<div class="bigBox">
<img src="./pic/1.png" class="big">
</div>
<div class="smallBox">
<img src="./pic/1.png" class="small">
<img src="./pic/2.png" class="small">
<img src="./pic/3.png" class="small">
<img src="./pic/4.png" class="small">
</div>
<script>
big = document.querySelector(".bigBox .big")
smalls = document.querySelectorAll(".smallBox .small")
smalls.forEach(small => {
small.addEventListener("click", function (e) {
url = e.target.src
big.classList.add("toggle")
setTimeout(() => {
big.src = url
big.classList.remove("toggle")
}, 1000)
})
})
</script>
</body>
</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>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bigBox {
position: relative;
margin: 10px auto;
width: 1000px;
}
button {
position: absolute;
width: 60px;
height: 40px;
font-size: 20px;
text-align: center;
}
.pre {
top: 50%;
right: 100%;
}
.next {
top: 50%;
}
.big {
width: 1000px;
height: 562.5px;
opacity: 100%;
transition: opacity 0.5s;
}
.smallBox {
margin: 10px auto;
width: 400px;
font-size: 0;
}
.small {
width: 100px;
height: 56.25px;
}
.toggle {
opacity: 0%;
}
.now {
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="bigBox">
<button class="pre">pre</button>
<img src="./pic/1.png" class="big">
<button class="next">next</button>
</div>
<div class="smallBox">
<img src="./pic/1.png" class="small now">
<img src="./pic/2.png" class="small">
<img src="./pic/3.png" class="small">
<img src="./pic/4.png" class="small">
</div>
<script>
pre = document.querySelector('.pre')
next = document.querySelector('.next')
big = document.querySelector(".bigBox .big")
smalls = document.querySelectorAll(".smallBox .small")
smalls.forEach(small => {
small.addEventListener("click", function (e) {
for (let i = 0; i < smalls.length; i++) {
if (smalls[i].classList.contains('now')) {
smalls[i].classList.remove('now')
}
}
let url = e.target.src
big.classList.add("toggle")
setTimeout(() => {
big.src = url
big.classList.remove("toggle")
}, 1000)
e.target.classList.add('now')
})
})
let num = -1
let flag = false;
pre.addEventListener("click", function (e) {
let i = 0;
while (1) {
if (flag) {
let url = smalls[(i + smalls.length - 2) % smalls.length].src
big.classList.add("toggle")
setTimeout(() => {
big.src = url
big.classList.remove("toggle")
}, 1000)
smalls[(i + smalls.length - 2) % smalls.length].classList.add('now')
flag = false
clearInterval(timer);
timer = setInterval(donext, 4000)
break;
}
if (smalls[i % smalls.length].classList.contains('now')) {
smalls[i % smalls.length].classList.remove('now')
num = i;
flag = true;
}
i++;
}
})
next.addEventListener("click", function (e) {
let i = 0;
while (1) {
if (flag) {
let url = smalls[i % smalls.length].src
big.classList.add("toggle")
setTimeout(() => {
big.src = url
big.classList.remove("toggle")
}, 1000)
smalls[i % smalls.length].classList.add('now')
flag = false
clearInterval(timer);
timer = setInterval(donext, 4000)
break;
}
if (smalls[i % smalls.length].classList.contains('now')) {
smalls[i % smalls.length].classList.remove('now')
num = i;
flag = true;
}
i++;
}
})
big.addEventListener("mouseover", function () {
clearInterval(timer);
timer = null;
})
big.addEventListener("mouseout", function () {
timer = setInterval(donext, 4000)
})
function donext() {
next.click()
}
let timer = setInterval(donext, 4000)
</script>
</body>
</html>
标签：hw12,
classList,
smalls,
js,
width,
length,
let,
big
From： https://www.cnblogs.com/echoT/p/17020498.html