<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
font-size: 12px;
}
.lunbo {
width: 800px;
height: 350px;
margin: 20px auto;
position: relative;
cursor: pointer;
}
.lunbo img {
width: 800px;
height: 350px;
}
.dot {
display: flex;
justify-content: center;
position: absolute;
left: 0;
right: 0;
bottom: 10px;
}
.dot li {
width: 10px;
height: 10px;
background-color: #ddd;
border-radius: 50%;
margin: 0 8px;
cursor: pointer;
}
.arrow {
font-size: 30px;
line-height: 80px;
text-align: center;
width: 50px;
height: 80px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
cursor: pointer;
color: linen;
}
.arrow:hover {
background-color: rgba(135, 190, 135, 0.519);
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.dot li.active {
background-color: red;
}
</style>
</head>
<body>
<div class="lunbo">
<img src="" class="img">
<ul class="dot">
</ul>
<div class="left arrow"><</div>
<div class="right arrow">></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 图片数组
let imgs = [
'http://p1.music.126.net/g1TjBYyPPOtMCBLfDiMGog==/109951166744755207.jpg?imageView&quality=89',
'http://p1.music.126.net/3J8fL0pft_tZnHHsLV_T5Q==/109951166744643576.jpg?imageView&quality=89',
'http://p1.music.126.net/cJTYc_FvMpX34nsIEYgQ4Q==/109951166744754881.jpg?imageView&quality=89',
'http://p1.music.126.net/J9Vdh425hfJCtZ5M5OCONw==/109951166745075595.jpg?imageView&quality=89',
'http://p1.music.126.net/ruwySsmA3Pu3FmcV-UxXow==/109951166744674989.jpg?imageView&quality=89'
]
//定义数组的下标
let index = 0
// 获取图片对象
let $img = $('.img')
// 默认显示第一张图片
$img.attr('src', imgs[index])
// 给图片注册鼠标进入事件
$('.lunbo').mouseenter(function() {
// 清空定时器
clearInterval(timer)
})
$('.lunbo').mouseleave(function() {
// 再开定时器
run()
})
// 注册箭头点击事件
$('.left').click(function() {
if (--index < 0) index = imgs.length - 1
// 再调更新图片
change()
})
$('.right').click(function() {
if (++index === imgs.length) index = 0
// 再调更新图片
change()
})
// 创建轮播点
function createDot() {
for (let i = 0; i < imgs.length; i++) {
// 创建点点
let $li = $('<li/>')
// 给点创建点击事件
$li.click(function() {
// 设置显示的下标
// alert($(this).index())
index = $(this).index()
// 再调更新图片
change()
})
$('.dot').append($li)
}
// 默认第一个小圆点高亮
$('.dot li').eq(index).addClass('active')
}
// 图片的轮播方法
let timer = null
function run() {
timer = setInterval(() => {
// 判断图片不能越界
if (++index >= imgs.length) index = 0
// 调用切换方法
change()
}, 1000);
}
// 小点点击事件
function change() {
// 更新图片
$img.attr('src', imgs[index])
// 切换原点跟着高亮
$('.dot li').eq(index).addClass('active').siblings('.active').removeClass('active')
}
createDot()
run()
</script>
</body>
</html>
