1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.box1 {
width: 560px;
height: 400px;
overflow: hidden;
}
.box2 {
width: 100%;
height: 320px;
}
.box2 img {
width: 100%;
height: 100%;
display: block;
}
.box3 {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.btn {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.box3 .btn button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.next,.prev {
opacity: 0;
}
.box1:hover .next {
opacity: 1;
}
.box1:hover .prev {
opacity: 1;
}
.box3 .btn button:hover {
background: rgba(255, 255, 255, 0.2);
}
p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<img src="./img/course01.png" alt="">
</div>
<div class="box3">
<p>11111111111111111111</p>
<ul class="indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="btn">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 轮播数据源定义
const data = [
{ url: './img/course1.png', title: '111111111', color: 'green' },
{ url: './img/course2.png', title: '222222222', color: 'yellow' },
{ url: './img/course3.png', title: '333333333', color: 'blue' },
{ url: './img/course4.png', title: '444444444', color: 'pink' },
{ url: './img/course5.png', title: '555555555', color: 'red' },
{ url: './img/course6.png', title: '666666666', color: 'brown' },
{ url: './img/course7.png', title: '777777777', color: 'grey' },
{ url: './img/course8.png', title: '888888888', color: 'skyblue' },
]
const img = document.querySelector('.box2 img')
const p = document.querySelector('.box3 p')
const box3 = document.querySelector('.box3')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
let i = 0
// 下一张按钮点击事件
next.addEventListener('click', function () {
i++ // 索引+1，切换到下一项
if(i >= 8) { // 边界判断：超过最后一项（索引7），重置为第一项（索引0）
i = 0
}
btn() // 调用更新函数，同步渲染轮播内容
})
// 上一张按钮点击事件
prev.addEventListener('click', function () {
i-- // 索引-1，切换到上一项
if(i < 0) { // 边界判断：小于第一项（索引0），重置为最后一项（索引7）
i = 7
}
btn() // 调用更新函数
})
function btn () {
img.src = data[i].url // 更新轮播图片路径
p.innerHTML = data[i].title // 更新标题文本
box3.style.backgroundColor = data[i].color // 更新box3背景色
// 指示器高亮切换：先移除原有的active，再给当前项加active
document.querySelector('.indicator .active').classList.remove('active')
document.querySelector(`.indicator li:nth-child(${i + 1})`).classList.add('active')
}
// 自动轮播：定时实现
let timerId = setInterval(function () {
next.click()
}, 1000)
const box1 = document.querySelector('.box1')
// 鼠标进入
box1.addEventListener('mouseenter', function () {
clearInterval(timerId) // 清除定时器，暂停轮播
})
// 鼠标离开
box1.addEventListener('mouseleave', function () {
clearInterval(timerId) // 先清除旧定时器
timerId = setInterval(function () { // 重新创建定时器，恢复轮播
next.click()
}, 1000)
})
</script>
</body>
</html>