JS使用定时器与事件监听实现轮播图切换功能
作者：可乐不撒
现在很多网站都有轮播图,下面这篇文章主要给大家介绍了关于JS如何使用定时器与事件监听实现轮播图切换功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
HTML部分
html部分比较简单,这里直接上代码
页面中默认显示第一张图片
ps.这里我找了四张图，所以有四个li
<div class="box">
<img src="./images/1.jpg" alt="">
<!-- 图片下方小圆点 -->
<ol>
<!-- 开始给第一个小圆点设置默认active类 代表点击选中的状态-->
<li class="active "></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>CSS部分
给轮播图盒子以及小圆点添加样式
/* 清除页面默认内外边距 */
* {
margin: 0;
padding: 0;
}
/* 给轮播图容器盒子设置宽高和相对定位 */
.box {
position: relative;
width: 382px;
height: 237px;
margin: 100px auto;
}
img {
width: 100%;
height: 100%;
}
/* 给小圆点设置绝对定位,定到图片下方 */
ol {
/* 改为弹性容器 */
display: flex;
position: absolute;
width: 80px;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
list-style: none;
/* 设置li的主轴对齐方式 */
justify-content: space-between;
}
/* 每一个小圆点设置背景黑色半透明和鼠标样式 */
li {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
/* 选中状态下得小圆点样式，改背景色为白色半透明 */
.active {
background-color: rgba(255, 255, 255, 0.8);
}JavaScript部分
首先将需要展示的图片地址存入数组
let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']
使用定时器间歇函数,实现自动切换图片的效果
这里代码比较简单,我都写了详细注释
// 设置一个计数器变量
let i = 0
// setInterval(function(){},2000) 设置2000ms执行一次
// 这里function(){}里面就是切换图片和小圆点样式的函数
setInterval(function () {
i++
// 如果切换到最后一张图的时候,把计数器归零
if (i > arr.length - 1) {
i = 0
}
// 获取页面中的img标签,注意这里页面中只有一个img,
// 所以使用querySelector,如果有多个就使用querySelectorAll
// 两者返回的值不同,前者返回的是一个对象类型,后者返回的是一个伪数组类型
let imgSet = document.querySelector('img')
// 更改img标签的src属性为新的地址
imgSet.src = arr[i]
// 获取所有的小圆点
let point = document.querySelectorAll('li')
// 获取所有类名为active的标签,并清空类名,达到恢复小圆点为默认样式的效果
document.querySelector('.active').className = ''
// 给当前小圆点添加active类名,设为选中状态
point[i].className = 'active'
}, 2000)最后就是事件监听实现自由切换图片功能
// 使用getElementsByTagName找到所有的li小圆点,得到的是伪数组
let click = document.getElementsByTagName('li')
// 这是for循环,遍历得到的伪数组
for (let j = 0; j < click.length; j++) {
// 给当前小圆点添加事件监听,监听鼠标点击效果
click[j].addEventListener('click', function () {
清除所有有active类名的类
document.querySelector('.active').className = ''
// 代码跟上面相同,就不解释了
click[j].className = 'active'
let imgSet = document.querySelector('img')
imgSet.src = arr[j]
// 将计数器设置为当前圆点
i = j
})
}完整代码如下
<!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>Document</title>
<style>
/* 清除页面默认内外边距 */
* {
margin: 0;
padding: 0;
}
/* 给轮播图容器盒子设置宽高和相对定位 */
.box {
position: relative;
width: 382px;
height: 237px;
margin: 100px auto;
}
img {
width: 100%;
height: 100%;
}
/* 给小圆点设置绝对定位,定到图片下方 */
ol {
/* 改为弹性容器 */
display: flex;
position: absolute;
width: 80px;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
list-style: none;
/* 设置li的主轴对齐方式 */
justify-content: space-between;
}
/* 每一个小圆点设置背景黑色半透明和鼠标样式 */
li {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
/* 选中状态下得小圆点样式，改背景色为白色半透明 */
.active {
background-color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/1.jpg" alt="">
<!-- 图片下方小圆点 -->
<ol>
<li class="active "></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']
// 设置一个计数器变量
let i = 0
// setInterval(function(){},2000) 设置2000ms执行一次
// 这里function(){}里面就是切换图片和小圆点样式的函数
setInterval(function () {
i++
// 如果切换到最后一张图的时候,把计数器归零
if (i > arr.length - 1) {
i = 0
}
// 获取页面中的img标签,注意这里页面中只有一个img,
// 所以使用querySelector,如果有多个就使用querySelectorAll
// 两者返回的值不同,前者返回的是一个对象类型,后者返回的是一个伪数组类型
let imgSet = document.querySelector('img')
// 更改img标签的src属性为新的地址
imgSet.src = arr[i]
// 获取所有的小圆点
let point = document.querySelectorAll('li')
// 获取所有类名为active的标签,并清空类名,达到恢复小圆点为默认样式的效果
document.querySelector('.active').className = ''
// 给当前小圆点添加active类名,设为选中状态
point[i].className = 'active'
}, 2000)
// 使用getElementsByTagName找到所有的li小圆点,得到的是伪数组
let click = document.getElementsByTagName('li')
// 这是for循环,遍历得到的伪数组
for (let j = 0; j < click.length; j++) {
// 给当前小圆点添加事件监听,监听鼠标点击效果
click[j].addEventListener('click', function () {
清除所有有active类名的类
document.querySelector('.active').className = ''
// 代码跟上面相同,就不解释了
click[j].className = 'active'
let imgSet = document.querySelector('img')
imgSet.src = arr[j]
// 将计数器设置为当前圆点
i = j
})
}
</script>
</body>
</html>总结
前面实现自动切换的时候还好,但是在实现手动切换的时候,一开始没有弄明白querySelector和querySelectorAll返回值得区别,不知道怎么获取到底是哪一个小圆点鼠标单击点击,所以一开始使用的是笨办法,选中每一个小圆点添加事件绑定实现手动切换,代码比较冗余,最会研究了一晚上,才搞明白两者返回的值不同,前者返回的是一个对象类型,后者返回的是一个伪数组类型,如果想更改伪数组里的属性,必须先遍历一下数组,使用for循环遍历之后给每一个小圆点添加事件监听切换图片和圆点样式
效果图
到此这篇关于JS使用定时器与事件监听实现轮播图切换功能的文章就介绍到这了,更多相关JS实现轮播图切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！