1.通过DOM显示轮播图效果,代码如下:
<!DOCTYPE html>
<html>
<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>轮播图</title>
<link rel="stylesheet" href="../css/common.css">
<style>
*{
list-style: none;
}
/* 轮播图容器 */
.lunbo {
width: 800px;
height: 350px;
margin: 20px auto;
/* 相对定位 */
position: relative;
}
/* 轮播图图片 */
.lunbo img {
width: 800px;
height: 350px;
}
/* 小按钮 */
.dot {
/* 绝对定位 */
position: absolute;
left: 0;
right: 0;
bottom: 10px;
display: flex;
}
.dot li {
width: 8px;
height: 8px;
background-color: #ccc;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.dot li.active {
background-color: tomato;
}
/* 箭头 */
.arrow {
width: 50px;
height: 80px;
font-size: 30px;
text-align: center;
line-height: 80px;
color: #666;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
}
.arrow:hover {
background-color: rgba(173, 216, 230, 0.5);
}
.left {
left: 10px;
}
.right {
right: 10px;
}
</style>
</head>
<body>
<div class="lunbo">
<img id="img" src="">
<ul class="dot flex j-c">
<!-- <li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
<div class="left arrow"><</div>
<div class="right arrow">></div>
</div>
<script>
// 定义图片数组
let imgs = ["http://p1.music.126.net/bYpz2EzQtOxLSsKdYFKLlg==/109951166108416305.jpg?imageView&quality=89",
"http://p1.music.126.net/w5nRr9khPUar7ooD6t-17A==/109951166106560685.jpg?imageView&quality=89",
"http://p1.music.126.net/PbJe6QR4zDysvMgKJ8VYgQ==/109951166106325434.jpg?imageView&quality=89",
"http://p1.music.126.net/FrA3j1mgvAmelemjZy3ssw==/109951166107492401.jpg?imageView&quality=89",
"http://p1.music.126.net/8pnqro4k5TCKE7ZZtnWiuQ==/109951166107492177.jpg?imageView&quality=89",
"http://p1.music.126.net/ZjnFalihrdOh-nrxxb3yNA==/109951166108228282.jpg?imageView&quality=89"]
// 定义数组的下标
let index = 0
// 获取轮播图容器
let lunbo = document.querySelector('.lunbo')
// 获取图片元素
let img = document.getElementById("img")
// 显示默认图片
img.src = imgs[index]
// 鼠标进入事件轮播容器
lunbo.onmouseenter = function () {
// 根据定时器的编号,清除定时器
clearInterval(timer)
}
// 鼠标离开事件离开轮播容器
lunbo.onmouseleave = function () {
// 启动定时器
run()
}
// 添加小按钮
for (let i = 0; i < imgs.length; i++) {
let li = document.createElement('li')
document.querySelector('.dot').appendChild(li)
}
// 小按钮显示默认高亮
// classList属性,是类选择器集合,通过add方法添加类选择器,通过remove方法移除类选择器
document.querySelectorAll('.dot li')[index].classList.add('active')
// 给小按钮注册点击事件
document.querySelectorAll('.dot li').forEach(function (li, i) {
li.onclick = function () {
//更新显示的下标
index = i
// 调用切换显示的方法
change()
}
})
// 左箭头按钮点击事件
document.querySelector('.left').onclick = function(){
//下标减1
if(--index < 0) index = imgs.length-1
// 调用切换显示的方法
change()
}
// 右箭头按钮点击事件
document.querySelector('.right').onclick = function(){
//下标加1
if(++index >= imgs.length) index = 0
// 调用切换显示的方法
change()
}
// 启动定时器的方法
let timer = null //定义定时器变量
function run() {
timer = setInterval(() => {
if (++index >= imgs.length) index = 0
// 调用切换显示的方法
change()
}, 3000);
}
// 启动定时器
run()
// 切换显示的方法
function change() {
// 显示对应的图片
img.src = imgs[index]
// 切换高亮小按钮
document.querySelector('.dot li.active').classList.remove('active')
document.querySelectorAll('.dot li')[index].classList.add('active')
}
</script>
</body>
</html>