前言:
现时朋友们对“js代码轮播”大致比较讲究,咱们都需要剖析一些“js代码轮播”的相关文章。那么小编也在网摘上汇集了一些关于“js代码轮播””的相关文章,希望朋友们能喜欢,我们快快来了解一下吧!最近工作学习时间很忙,好久没有更新头条文章了,利用今天周日,使用原生的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()一定在写在定时器之前,否则会报错。
代码写到这里已经完成了自动切换的效果了。但是会发现有个问题,就是分页小圆点不会跟随着图片进行切换,那是因为我还没实现它的逻辑。现在开始实现这个分页按钮跟随对应的图片进行切换的逻辑。
分页小圆点的实现原理是:我们先利用上面拿到的小圆点元素,用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(); });});
以上就是我写这个渐隐渐现轮播图的全部过程,如果有写得不好的地方,请各位大佬批评指正,如果有跟我一样的初学者想看完整代码的同学,可以关注私信我并回复“轮播”获取源码。
标签: #js代码轮播