#第十二题
- IT业界
- 2025-09-05 09:06:01
第十二题
<!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>
.box {
width: 800px;
height: 600px;
border: 2px solid red;
position: fixed;
margin-top: 200px;
left: 430px;
}
.im a {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
.im a>img {
width: 100%;
height: 100%;
}
.im {
width: 100%;
height: 100%;
}
.l {
position: absolute;
top: 50%;
font-size: 30px;
font-weight: bolder;
display: none;
}
.r {
position: absolute;
top: 50%;
right: 0;
font-size: 30px;
font-weight: bolder;
display: none;
}
.bn {
position: absolute;
bottom: 20px;
left: 360px;
display: flex;
}
.bn span {
width: 14px;
height: 14px;
border-radius: 100%;
background: red;
display: block;
margin-right: 10px;
}
.bn1 {
background: blue !important;
}
.mn {
display: block !important;
}
</style>
</head>
<body>
<div>
<div class="box">
<div class="im">
<a href="#" class="mn"><img src="52523231843051092851738667855577.jpg"></a>
</div>
<div class="l" ><</div>
<div class="r">></div>
<div class="bn">
<span class="bn1"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
window.onload = function () {
const im = document.querySelector('.im')
const box = document.querySelector('.box')
const l = document.querySelector('.l')
const r = document.querySelector('.r')
const ima = document.querySelectorAll('.im a')
const s = document.querySelectorAll('.bn span')
const img = document.querySelector('.im img')
let i = 0
const date = [
{ url: '52523231843051092851738667855577.jpg' },
{ url: 'IMG_20250203_191203.jpg' },
{ url: 'IMG_20250203_191417.jpg' },
{ url: '52540120473724869791738579278581.jpg' },
]
l.addEventListener('click', function () {
i--
if (i < 0) {
i = date.length - 1
}
img.src = date[i].url
document.querySelector('.bn .bn1').classList.remove('bn1')
document.querySelector(`.bn span:nth-child(${i + 1})`).classList.add('bn1')
})
r.addEventListener('click', function () {
i++
if (i >= date.length) {
i = 0
}
img.src = date[i].url
document.querySelector('.bn .bn1').classList.remove('bn1')
document.querySelector(`.bn span:nth-child(${i + 1})`).classList.add('bn1')
})
let time = setInterval(function () {
r.click()
}, 1000)
box.addEventListener('mouseenter', function () {
clearInterval(time)
l.style.display = 'block'
r.style.display = 'block'
})
box.addEventListener('mouseleave', function () {
clearInterval(time)
l.style.display = 'none'
r.style.display = 'none'
time = setInterval(function () {
r.click()
}, 1000)})
}
</script>
</body>
</html>
