轮播图二(自动轮播+左右按钮点击+鼠标经过事件)
思路:
1.获取事件
分析哪些标签需要改变的就是所需要的获取的事件
2.注册事件
注册事件一般是根据页面操作行为来判断是什么事件(如用户点击就是点击事件,鼠标滑动就是滑动事件等等....)
3.自动轮播
加入定时器(注意:有的不仅需要加入开启定时器,也可能需要加入停止定时器,视需求而定)
css部分
<!DOCTYPE html>
<html lang="en">
<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>
<style>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle 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;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
js部分(重点)
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [{
url: './images/slider01.jpg',
title: '对人类来说会不会太超前了？',
color: 'rgb(100, 67, 68)'
}, {
url: './images/slider02.jpg',
title: '开启剑与雪的黑暗传说！',
color: 'rgb(43, 35, 26)'
}, {
url: './images/slider03.jpg',
title: '真正的jo厨出现了！',
color: 'rgb(36, 31, 33)'
}, {
url: './images/slider04.jpg',
title: '李玉刚：让世界通过B站看到东方大国文化',
color: 'rgb(139, 98, 66)'
}, {
url: './images/slider05.jpg',
title: '快来分享你的寒假日常吧~',
color: 'rgb(67, 90, 92)'
}, {
url: './images/slider06.jpg',
title: '哔哩哔哩小年YEAH',
color: 'rgb(166, 131, 143)'
}, {
url: './images/slider07.jpg',
title: '一站式解决你的电脑配置问题！！！',
color: 'rgb(53, 29, 25)'
}, {
url: './images/slider08.jpg',
title: '谁不想和小猫咪贴贴呢！',
color: 'rgb(99, 72, 114)'
}, ]
// 一.获取事件源
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
const slider = document.querySelector('.slider')
let i = 0 //记录图片张数
//二.注册事件 点击事件
//2.1右侧按钮
next.addEventListener('click', function() {
i++ //让其自加一 便于实现向右轮播
//为了使播到最后一张返回到第一张 实现循环播放
if (i >= sliderData.length) {
i = 0
}
//调用函数
toggle()
})
//因为还有编入左侧按钮 提高代码复用率可以进行函数封装
function toggle() {
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroudColor = sliderData[i].color
//排他思想 修改固有属性 实现属性轮播(小圆点高亮显示 )
document.querySelector('.slider-indicator .active').classList.remove('active') //移除
document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active') //添加active的属性
}
//2.2左侧按钮
prev.addEventListener('click', function() {
i-- //让其自减一 便于实现向左轮播
if (i < 0) {
//点击到一张后,使其返回到最后一张 与右侧按钮相反
i = sliderData.length - 1
}
toggle()
})
// 三.自动播放
//3.1 加入定时器 自动播放
let timerId = setInterval(function() {
next.click()
}, 1000)
//3.2 加入鼠标经过事件
slider.addEventListener('mouseenter', function() {
//鼠标经过清除定时器 停止播放
clearInterval(timerId)
})
slider.addEventListener('mouseleave', function() {
//鼠标离开开启定时器 继续播放
timerId = setInterval(function() {
next.click()
}, 1000)
})
</script>
</body>
</html>
解释都在随行注释里
