案例-轮播图
轮播图
学完了vue才发现自己居然没有用js写过轮播图，因此想来补一下，并简单记录以下
轮播图点击切换
需求：当点击左右的按钮，可以切换轮播图
分析：
①：右侧按钮点击，变量++,如果大于等于8,则复原0
②：左侧按钮点击，变量–,如果小于0,则复原最后一张
③：鼠标经过暂停定时器
④：鼠标离开开启定时器
①：右侧按钮点击，变量++,如果大于等于8,则复原0
//获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
//1.右侧按钮业务
//1.1获取右侧按钮
const next = document.querySelector('.next')
let i = 0 //信号量 控制图片张数
//1.2注册点击事件
next.addEventListener('click', function () {
i++
//1.6判断条件 如果大于8 复原为0
if (i >= sliderData.length) {
i = 0
}
//三元写法 i >= sliderData.length ? 0 : i
//1.3得到对应的对象
// console.log(sliderData[i]);
//1.4渲染对应的数据
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroundColor = sliderData[i].color
//1.5难点：更换小圆点 做法：先移除原来的类名，再给当前li添加这个类名
//1.先移除原来的类名
document.querySelector('.slider-indicator .active').classList.remove('active')
//2.再给当前li添加这个类名
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
})
②：左侧按钮点击，变量–,如果小于0,则复原最后一张
//2.左侧按钮业务
//2.1获取右侧按钮
const prev = document.querySelector('.prev')
//2.2注册点击事件
prev.addEventListener('click', function () {
i--
//1.6判断条件 如果小于0，则复原最后一张,索引号是7
if (i < 0) {
i = sliderData.length - 1
}
//三元写法 i < 0 ? sliderData.length - 1 : i
//1.3得到对应的对象
// console.log(sliderData[i]);
//1.4渲染对应的数据
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroundColor = sliderData[i].color
//1.5难点：更换小圆点 做法：先移除原来的类名，再给当前li添加这个类名
//1.先移除原来的类名
document.querySelector('.slider-indicator .active').classList.remove('active')
//2.再给当前li添加这个类名
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
})
渲染复用
由于左右点击的渲染部分都是一样的，所以可以单独用一个函数来存放渲染的部分
最终左右按钮的代码如下
//获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
//1.右侧按钮业务
//1.1获取右侧按钮
const next = document.querySelector('.next')
let i = 0 //信号量 控制图片张数
//1.2注册点击事件
next.addEventListener('click', function () {
i++
//1.6判断条件 如果大于8 复原为0
if (i >= sliderData.length) {
i = 0
}
//三元写法 i >= sliderData.length ? 0 : i
//1.3得到对应的对象
// console.log(sliderData[i]);
toggle()
})
//2.左侧按钮业务
//2.1获取右侧按钮
const prev = document.querySelector('.prev')
//2.2注册点击事件
prev.addEventListener('click', function () {
i--
//1.6判断条件 如果小于0，则复原最后一张,索引号是7
if (i < 0) {
i = sliderData.length - 1
}
//三元写法 i < 0 ? sliderData.length - 1 : i
//1.3得到对应的对象
// console.log(sliderData[i]);
//调用渲染函数
toggle()
})
//声明一个渲染的函数来复用
function toggle() {
//1.4渲染对应的数据
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroundColor = sliderData[i].color
//1.5难点：更换小圆点 做法：先移除原来的类名，再给当前li添加这个类名
//1.先移除原来的类名
document.querySelector('.slider-indicator .active').classList.remove('active')
//2.再给当前li添加这个类名
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
③自动播放模块和定时器
//3.自动播放模块
let timerId = setInterval(function () {
//利用js自动调用点击事件 click()一定要加小括号
next.click()
}, 1000)
//4.鼠标经过大盒子，停止定时器
const slider = document.querySelector('.slider')
//注册事件
slider.addEventListener('mouseenter', function () {
//停止定时器
clearInterval(timerId)
})
//4.鼠标离开大盒子，开启定时器
//注册事件
slider.addEventListener('mouseleave', function () {
//停止定时器
clearInterval(timerId)
//开启定时器
timerId = setInterval(function () {
//利用js自动调用点击事件 click()一定要加小括号
next.click()
}, 1000)
})
自动播放主要就是靠定时器，每1秒触发一次右侧点击按钮,注意click()一定要加小括号
定时器首先要注意的是获取元素获取的是整个轮播图大盒子，其次要注意要养成开启定时器前先关闭定时器的习惯
代码
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>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./image/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: './image/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
{ url: './image/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
{ url: './image/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
{ url: './image/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: './image/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: './image/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: './image/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
{ url: './image/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')
//1.右侧按钮业务
//1.1获取右侧按钮
const next = document.querySelector('.next')
let i = 0 //信号量 控制图片张数
//1.2注册点击事件
next.addEventListener('click', function () {
i++
//1.6判断条件 如果大于8 复原为0
if (i >= sliderData.length) {
i = 0
}
//三元写法 i >= sliderData.length ? 0 : i
//1.3得到对应的对象
// console.log(sliderData[i]);
toggle()
})
//2.左侧按钮业务
//2.1获取右侧按钮
const prev = document.querySelector('.prev')
//2.2注册点击事件
prev.addEventListener('click', function () {
i--
//1.6判断条件 如果小于0，则复原最后一张,索引号是7
if (i < 0) {
i = sliderData.length - 1
}
//三元写法 i < 0 ? sliderData.length - 1 : i
//1.3得到对应的对象
// console.log(sliderData[i]);
//调用渲染函数
toggle()
})
//声明一个渲染的函数来复用
function toggle() {
//1.4渲染对应的数据
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroundColor = sliderData[i].color
//1.5难点：更换小圆点 做法：先移除原来的类名，再给当前li添加这个类名
//1.先移除原来的类名
document.querySelector('.slider-indicator .active').classList.remove('active')
//2.再给当前li添加这个类名
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
//3.自动播放模块
let timerId = setInterval(function () {
//利用js自动调用点击事件 click()一定要加小括号
next.click()
}, 1000)
//4.鼠标经过大盒子，停止定时器
const slider = document.querySelector('.slider')
//注册事件
slider.addEventListener('mouseenter', function () {
//停止定时器
clearInterval(timerId)
})
//4.鼠标离开大盒子，开启定时器
//注册事件
slider.addEventListener('mouseleave', function () {
//停止定时器
clearInterval(timerId)
//开启定时器
timerId = setInterval(function () {
//利用js自动调用点击事件 click()一定要加小括号
next.click()
}, 1000)
})
script>
body>
html>