<!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>
* {
padding: 0;
margin: 0;
list-style: none;
}
#view {
position: relative;
width: 540px;
height: 600px;
overflow: hidden;
margin: 100px auto;
}
#imgBox {
height: 100%;
}
#imgBox img {
width: 540px;
height: 100%;
float: left;
}
#list {
position: absolute;
bottom: 20px;
width: 60%;
left: 20%;
display: flex;
justify-content: space-around;
}
#list li {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}
.active {
background-color: brown !important;
}
.btns {
width: 100%;
position: absolute;
top: 50%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.btns button {
height: 100%;
border: none;
border-radius: 15px;
background-color: transparent;
font-size: 18px;
font-weight: bold;
color: #fff;
}
.btns button:hover {
color: red;
}
.t {
transition: all 0.5s;
}
</style>
</head>
<body>
<div id="view">
<div id="imgBox">
</div>
<ul id="list">
</ul>
<div class="btns">
<button id="left">上一张</button>
<button id="right">下一张</button>
</div>
</div>
</body>
<script>
var arrImg = ["./4.jpg", "./1.jpg", "./2.jpg", "./3.jpg", "./4.jpg", "./1.jpg"]
var num = 1;
var timer;
imgBox.style.marginLeft = num * -540 + 'px'
imgBox.style.width = arrImg.length * 540 + 'px'
arrImg.forEach((item, index) => {
imgBox.innerHTML += `
<img src ='${item}'>
`
if (index > 1) {
list.innerHTML += `
<li></li>
`
}
})
var lists = document.querySelectorAll('#list li');
lists[num - 1].classList.add('active');
function Time() {
timer = setInterval(() => {
num++
imgBox.classList.add('t')
imgBox.style.marginLeft = num * -540 + 'px'
if (num == arrImg.length - 1) {
imgBox.classList.remove('t');
num = 0
imgBox.style.marginLeft = num * -540 + 'px'
setTimeout(() => {
imgBox.classList.add('t')
num = 1
imgBox.style.marginLeft = num * -540 + 'px'
}, 16.7)
}
ulMove2()
}, 1500)
}
Time()
view.onmousemove = function () {
clearInterval(timer)
}
view.onmouseout = function () {
Time()
}
function ulMove() {
for (let i = 0; i < lists.length; i++) {
lists[i].classList.remove('active');
}
}
right.onclick = function () {
num++
imgBox.classList.add('t')
imgBox.style.marginLeft = num * -540 + 'px'
if (num == arrImg.length - 1) {
imgBox.classList.remove('t');
num = 0
imgBox.style.marginLeft = num * -540 + 'px'
setTimeout(() => {
imgBox.classList.add('t')
num = 1
imgBox.style.marginLeft = num * -540 + 'px'
}, 16.7)
}
ulMove2()
}
left.onclick = function () {
num--
imgBox.classList.add('t')
imgBox.style.marginLeft = num * -540 + 'px'
if (num == 0) {
imgBox.classList.remove('t');
num = arrImg.length - 1
imgBox.style.marginLeft = num * -540 + 'px'
setTimeout(() => {
imgBox.classList.add('t')
num = 4
imgBox.style.marginLeft = num * -540 + 'px'
}, 16.7)
}
ulMove2()
}
for (let i = 0; i < lists.length; i++) {
lists[i].onclick = function () {
ulMove()
this.classList.add('active');
num = (i + 1)
imgBox.style.marginLeft = num * -540 + 'px'
}
}
function ulMove2() {
ulMove()
if (num < 5 && num > 0) {
lists[num - 1].classList.add('active');
} else if (num == 0) {
lists[num].classList.add('active');
} else if (num == 5) {
lists[num - 2].classList.add('active');
}
}
</script>
</html>
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
