213 lines
4.9 KiB
HTML
213 lines
4.9 KiB
HTML
<!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>
|
|
body,
|
|
html,
|
|
ul,
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.main {
|
|
width: 520px;
|
|
height: 280px;
|
|
border: 1px solid #000;
|
|
margin: 20px auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.lb {
|
|
width: 2080px;
|
|
position: absolute;
|
|
transition: all ease 0.3s;
|
|
}
|
|
|
|
.lb li {
|
|
float: left;
|
|
}
|
|
|
|
.navigation {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 50%;
|
|
margin-top: -10.5px;
|
|
}
|
|
|
|
.previous {
|
|
float: left;
|
|
}
|
|
|
|
.next {
|
|
float: right;
|
|
}
|
|
|
|
.navigation div {
|
|
color: #fff;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #000;
|
|
text-align: center;
|
|
font-size: 21px;
|
|
line-height: 27px;
|
|
}
|
|
|
|
.dot {
|
|
position: absolute;
|
|
z-index: 9;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
margin-left: -40px;
|
|
}
|
|
|
|
.dot li {
|
|
float: left;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 100%;
|
|
background: #fff;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.active {
|
|
background: red !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="main">
|
|
<ul class="lb" style="left: 0px;">
|
|
<li>
|
|
<img src="./lb_1.jpg" alt="">
|
|
</li>
|
|
<li>
|
|
<img src="./lb_2.jpg" alt="">
|
|
</li>
|
|
<li>
|
|
<img src="./lb_3.jpg" alt="">
|
|
</li>
|
|
<li>
|
|
<img src="./lb_4.png" alt="">
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="navigation">
|
|
<div class="previous"><</div>
|
|
<div class="next">></div>
|
|
</div>
|
|
|
|
<ul class="dot">
|
|
<li class="active"></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script>
|
|
var Next = document.querySelector(".next"),
|
|
Previous = document.querySelector(".previous"),
|
|
Dot = document.querySelectorAll(".dot li"),
|
|
Main = document.querySelector(".main"),
|
|
AutoPlay,
|
|
LbMain = document.querySelector(".lb");
|
|
|
|
// 下一页按钮被点击
|
|
Next.onclick = function() {
|
|
// 移动轮播图
|
|
animation(-520)
|
|
// 切换小圆点的激活样式
|
|
ChangeDotActive()
|
|
}
|
|
|
|
// 上一页按钮被点击
|
|
Previous.onclick = function() {
|
|
// 移动轮播图
|
|
animation(520)
|
|
// 切换小圆点的激活样式
|
|
ChangeDotActive()
|
|
}
|
|
|
|
//
|
|
function animation(offset) {
|
|
// 计算移动距离
|
|
var y = parseInt(LbMain.style.left) + offset;
|
|
// 如果是最后一张图的话，再切换回第一张
|
|
if (y < -1560) {
|
|
LbMain.style.left = "0px";
|
|
return;
|
|
} else {
|
|
LbMain.style.left = `${y}px`
|
|
}
|
|
|
|
// 如果时第一张的话，再切换，回最后一张
|
|
if (y > 0) {
|
|
LbMain.style.left = "-1560px"
|
|
} else {
|
|
LbMain.style.left = `${y}px`
|
|
}
|
|
}
|
|
|
|
// 切换小圆点的激活样式
|
|
function ChangeDotActive(type = null) {
|
|
// 小标
|
|
var index = "";
|
|
// == null 是 上下翻页按钮被点击时候执行的，需要小圆点跟着轮播图一起联动
|
|
if (type == null) {
|
|
var TotalLeft = Math.abs(parseInt(document.querySelector(".lb").style.left));
|
|
index = TotalLeft / 520;
|
|
// 小圆点单独被点击的时候
|
|
} else {
|
|
index = type;
|
|
}
|
|
|
|
// 清除所有的激活样式
|
|
Dot.forEach(val => val.className = "");
|
|
// 为你点击的li加激活样式
|
|
Dot[index].className = "active";
|
|
}
|
|
|
|
// 循环绑定事件，点击切换样式，并滚动轮播图
|
|
Dot.forEach((val, index) => {
|
|
val.onclick = function() {
|
|
ChangeDotActive(index)
|
|
LbMain.style.left = `-${index * 520}px`;
|
|
}
|
|
})
|
|
|
|
// 鼠标悬浮停止自动播放
|
|
Main.onmouseover = function() {
|
|
clearInterval(AutoPlay)
|
|
}
|
|
|
|
// 鼠标离开，重新开始自动播放
|
|
Main.onmouseout = function() {
|
|
Play()
|
|
}
|
|
|
|
// 自动播放
|
|
function Play() {
|
|
AutoPlay = setInterval(() => {
|
|
Next.onclick()
|
|
// animation(-520)
|
|
// ChangeDotActive()
|
|
}, 2000)
|
|
}
|
|
|
|
Play()
|
|
</script>
|
|
|
|
</html> |