轮播图html
题十二：轮播图
要求：
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。
原理：
- 当鼠标进入时，左走箭头出现，定时器关闭，离开时，箭头消失，定时器开启。
- 写DOM对应的小圆点，找让图片文字小圆点的高亮移除，再当索引值到了之后，添加高亮事件.
- 当点击左图右图是分别修改其对应的索引号.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义轮播图</title>
<style>
#container {
margin: 0 auto;
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
}
#container img {
width: 100%;
height: 100%;
background-size: cover;
display: none;
}
#container img.active {
display: block;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: white;
background: rgba(0, 0, 0, 0.3);
padding: 10px 15px;
cursor: pointer;
display: none;
}
#left {
left: 10px;
}
#right {
right: 10px;
}
#dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
#dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
margin: 0 5px;
cursor: pointer;
}
#dots span.active {
background: white;
}
.name {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div id="container">
<img src="./任务/交互图片/1.jpg" alt="图片1" class="active">
<div class="name">fall'in out</div>
<img src="./任务/交互图片/2.jpg" alt="图片2">
<div class="name">找自己</div>
<img src="./任务/交互图片/3.jpg" alt="图片3">
<div class="name">单车恋人</div>
<span id="left" class="arrow"><</span>
<span id="right" class="arrow">></span>
<div id="dots"></div>
</div>
<script>
const Container = document.querySelector('#container')
const images = document.querySelectorAll('#container img')
const names = document.querySelectorAll('.name')
const dotsContainer = document.getElementById('dots')
const Left = document.querySelector('#left')
const Right = document.querySelector('#right')
//当前显示图片的索引
let currentIndex = 0
//命名自动播放定时器
let autoplayInterval
function onMouseEnter() {
//鼠标一进入就关闭定时器
clearInterval(autoplayInterval)
Left.style.display = 'block'
Right.style.display = 'block'
}
function onMouseLeave() {
//开启
startAutoplay()
Left.style.display = 'none'
Right.style.display = 'none'
}
Left.addEventListener('click', () => {
clearInterval(autoplayInterval)
//一定要调用
leftImage()
});
Right.addEventListener('click', () => {
clearInterval(autoplayInterval)
rightImage()
})
Container.addEventListener('mouseenter', function() {
onMouseEnter()
})
Container.addEventListener('mouseleave', function() {
onMouseLeave()
})
// 显示指定索引的图片
function showImage(index) {
images.forEach((img, i) => {
//先全部移除高亮
img.classList.remove('active')
//文字也先不显示
names[i].style.display = 'none'
})
dotsContainer.querySelectorAll('span').forEach((dot, i) => {
//小圆点高亮移除
dot.classList.remove('active')
})
//到相应的索引号，高亮和文字显示
images[index].classList.add('active')
names[index].style.display = 'block'
//小圆点高亮添加
dotsContainer.querySelectorAll('span')[index].classList.add('active')
//修改索引号
currentIndex = index
}
function createDots() {
//回调函数，函数对应的DOM元素及索引号
images.forEach((_, index) => {
//新建小圆点，有几个DOM建几个
const dot = document.createElement('span')
if (index === 0) {
//默认高亮类名
dot.classList.add('active')
}
dot.addEventListener('click', function() {
//一旦点击，关闭定时器
clearInterval(autoplayInterval)
showImage(index)
})
//根据DOM数量，添加小圆点
dotsContainer.appendChild(dot)
});
}
// 右图
function rightImage() {
//index+1
currentIndex = (currentIndex + 1) % images.length
showImage(currentIndex)
}
// 左图
function leftImage() {
//同理
currentIndex = (currentIndex - 1 + images.length) % images.length
showImage(currentIndex);
}
function startAutoplay() {
autoplayInterval = setInterval(rightImage, 1500)
}
// 调用小圆点和自动播放，使页面一开始就有效果
createDots()
startAutoplay()
</script>
</body>
</html>
