javascript轮播图实现的原理（用多了各种组件库的你还会用原生JS写轮播图吗）
javascript轮播图实现的原理（用多了各种组件库的你还会用原生JS写轮播图吗）// 创建分页小圆点，首先创建文档片段 let frag = document.createDocumentFragment(); for (let i = 0; i < sliderLists.length; i ) { const a = document.createElement('a'); a.href = 'javascript:;'; a.class = 'btn'; frag.appendChild(a); } // 将生成的文档碎片挂载到paginations下 paginations.appendChild(frag); // 为第一个分页圆点添加默认样式 paginations.firstElementChild.classList.add('active');分页
最近工作学习时间很忙，好久没有更新头条文章了，利用今天周日，使用原生的JavaScript写了一个渐隐渐现的轮播，算是对最近的前端学习的一个小总结吧。下面我来分享一下我写这个功能的步骤以及经验总结。
一、功能说明1.1 功能介绍
- 实现一个渐隐渐现的轮播图；
- 可以自动切换，也可以鼠标点击翻页按钮或者小圆点进行切换；
- 同时鼠标移动到图片上停止自动切换，鼠标移出图片恢复自动切换。
1.2 效果图如下
渐隐渐现轮播图效果
二、HTML和CSS结构- 图片容器：这里我放了4张美女图，为啥用这个，因为养眼。（手动滑稽）
- 分页容器：就是那几个小圆点，可以切换每一张图片。
- 翻页按钮：轮播图左右两边的按钮，也可以切换图片。
- HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>原生JS写一个渐隐渐现轮播图</title>
<link rel="stylesheet" href="slider.css">
</head>
<body>
<div class="container">
<!-- 1. 轮播图片组 -->
<div class="imgs">
<a href="" class="slider"><img src="./images/1.jpg" class="active" /></a>
<a href="" class="slider"><img src="./images/2.jpg" /></a>
<a href="" class="slider"><img src="./images/3.jpg" /></a>
<a href="" class="slider"><img src="./images/4.jpg" /></a>
</div>
<!-- 2. 小圆点按钮 -->
<div class="paginations"></div>
<!-- 3. 翻页按钮 -->
<div class="skip">
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>
</div>
<script src="slider.js"></script>
</body>
</html>
- CSS代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
/* 轮播图的容器 */
.container {
width: 75em;
height: 42rem;
margin: 1em auto;
position: relative;
overflow: hidden;
}
/* 轮播图片组 */
.container .imgs {
width: 75rem;
height: 42rem;
overflow: hidden;
}
.container .imgs a {
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 0;
transition: all .6s;
}
.container .imgs a img {
width: 100%;
height: 100%;
}
/* 设置默认显示的图片(第一张) */
.container>.imgs a:nth-of-type(1) {
opacity: 1;
z-index: 1;
}
.container>.paginations {
position: absolute;
left: 0;
right: 0;
bottom: 1rem;
/* 水平居中 */
text-align: center;
z-index: 99;
}
.container>.paginations a {
/* 转成行内块元素: 即能水平排列 双支持宽度设置 */
display: inline-block;
padding: .8rem;
margin: 0 0.5em;
background-color: #fff;
border-radius: 50%;
transition: all .5s;
}
.container>.paginations a.active {
background-color: #000;
}
/* 翻页按钮 */
.container .skip a {
position: absolute;
z-index: 99;
width: 2.5rem;
height: 5rem;
line-height: 5rem;
text-align: center;
opacity: 0.5;
top: 50%;
margin-top: -2.5rem;
font-size: 2rem;
background-color: #ccc;
transition: all .6s;
}
.container .skip .prev {
left: 0;
}
.container .skip .next {
right: 0;
}
.container .skip *:hover {
opacity: 0.9;
color: #666;
}
目前页面的基础效果都已经完成了，效果是这样的：
轮播图默认效果
三、JavaScript代码首先，在做我们的轮播效果之前，我们需要先拿到相关的元素。
// 获取相关容器元素
// 轮播图容器
const container = document.querySelector('.container');
// 图片容器
const imgs = document.querySelector('.imgs');
// 每一张图片元素
const sliderLists = document.querySelectorAll('.slider');
// 小圆点容器元素
const paginations = document.querySelector('.paginations');
// 上翻页按钮
const prevBtn = document.querySelector('.prev');
// 下翻页按钮
const nextBtn = document.querySelector('.next');
至于分页小圆点按钮，我个人认为应该根据轮播图片的数量去动态生成它，因此我是这样写的：
// 创建分页小圆点，首先创建文档片段
let frag = document.createDocumentFragment();
for (let i = 0; i < sliderLists.length; i ) {
const a = document.createElement('a');
a.href = 'javascript:;';
a.class = 'btn';
frag.appendChild(a);
}
// 将生成的文档碎片挂载到paginations下
paginations.appendChild(frag);
// 为第一个分页圆点添加默认样式
paginations.firstElementChild.classList.add('active');
分页圆点元素渲染出来之后，先拿到它所有的元素以备后面做点击切换图片的事件使用。
let paginationBtns = document.querySelectorAll('.paginations a');3.1 实现自动轮播的效果
由于我做的是渐隐渐现的效果，所以需要控制元素的z-index和opacity两个属性的值即可。
实现原理是：哪张图片显示，就把该元素的z-index和opacity值都设置成1，把需要隐藏的元素的z-index和opacity值都设置成0即可。这时，就需要两个值来记录当前图片的位置，和上一张图片的位置。至于自动切换效果，我是利用定时器实现的。
- 代码实现
// prev 上一张图片的位置，curr 当前图片的位置。默认显示第一张图片。
let prev = 0 curr = 0;
// 自动切换图片，由于此方法后面还需要再次使用，这里我就封装成了一个函数。
let autoSwitchImg = function () {
// 记录上一张图片的索引值，默认从0开始，即：第一张图片
prev = curr;
// 上一张图片的索引自增1，就是下一张要显示的图片，即当前图片。
curr ;
// 判断当前的索引值是不是大于图片的总数，大于的话就从0开始，即第一张图片开始轮播，
// 否则继续向下一张图片切换。
curr = curr >= sliderLists.length ? 0 : curr;
switchImg();
};
// 利用定时器设置自动轮播，这里我默认的是3s自动切换。
let interval = setInterval(autoSwitchImg 3000);
这里有一点需要注意的是：自动切换函数autoSwitchImg()一定在写在定时器之前，否则会报错。
代码写到这里已经完成了自动切换的效果了。但是会发现有个问题，就是分页小圆点不会跟随着图片进行切换，那是因为我还没实现它的逻辑。现在开始实现这个分页按钮跟随对应的图片进行切换的逻辑。
分页圆点bug
分页小圆点的实现原理是：我们先利用上面拿到的小圆点元素，用forEach()去遍历每一个元素，如果当前图片的位置索引等于小圆点的位置索引（curr === index），那么就给这个圆点添加上一个active类实现切换效果。值得注意的是，我们拿到的小圆点的元素是一个NodeList类数组，需要先转换成数组再使用。具体请看下面的代码实现。
- 代码实现
// 让分页按钮跟图片索引对应
let switchPaginateBtn = function () {
Array.from(paginationBtns).forEach((item index) => {
curr === index ? item.className = 'active' : item.className = '';
});
};
这样就可以实现图片和圆点切换一致地进行了。
以上是自动切换图片的功能，如果我们想实现鼠标移入轮播海报上停止自动切换，鼠标移除再恢复自动切换应该怎么办呢？可以利用鼠标移入(onmouseenter)、移出(onmouseleave)事件进行操作。
- 代码实现
// 鼠标移入轮播区域取消自动轮播
container.addEventListener('mouseenter' () => {
clearInterval(interval);
interval = null;
});
// 鼠标移出轮播区域开始自动轮播
container.addEventListener('mouseleave' () => {
interval = setInterval(autoSwitchImg 3000);
});
截止到目前为止，上面的代码已经实现了图片的渐隐渐现效果，以及鼠标滑入滑出暂停和恢复切换的效果。下面需要做的就是实现手动点击切换事件。
3.2 点击翻页按钮实现切换效果上一页翻页按钮与自动切换图片的逻辑刚好相反，拿到当前图片的索引，减去1就是上一张图片的索引，也就是要切换到当前图片的索引值。
// 上一页
prevBtn.addEventListener('click' () => {
// 保存当前图片的索引
prev = curr;
// 上一张图片就是当前图片的索引值-1
curr--;
curr = curr < 0 ? sliderLists.length - 1 : curr;
switchImg();
});
下一页翻页按钮与自动切换图片的逻辑完全一样，只需要调用一下自动切换的逻辑即可
// 下一页
nextBtn.addEventListener('click' () => {
autoSwitchImg();
});
通过给翻页按钮添加以上两个点击事件，已经完成了点击切换图片的功能了，下面再聊一聊如何通过点击分页小圆点切换图片的功能。
3.3 点击分页小圆点切换图片实现原理：通过给每个小圆点添加一个点击事件，通过判断当前点击的小圆点的位置索引，切换到对应的图片即可。
- 代码实现
// 点击分页小圆点切换图片
Array.from(paginationBtns).forEach((item index) => {
item.addEventListener('click' () => {
// 保存当前图片的位置索引
prev = curr;
// 将当前点击的小圆点的位置索引值赋值给的需要显示的图片变量
curr = index;
// 调用切换图片函数，实现切换效果
switchImg();
});
});
以上就是我写这个渐隐渐现轮播图的全部过程，如果有写得不好的地方，请各位大佬批评指正，如果有跟我一样的初学者想看完整代码的同学，可以关注私信我并回复“轮播”获取源码。
