本文介绍如何使用JavaScript结合定时器与事件监听实现轮播图切换功能。通过HTML结构、CSS样式及JS逻辑，利用setInterval实现自动轮播，并通过事件监听实现手动切换。重点解析querySelector与querySelectorAll的区别及伪数组遍历处理。
HTML部分
HTML结构较为简单，直接展示相关代码。
页面加载后，默认展示第一张图片。
示例中选取了四张图片，因此对应四个列表项。
<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实现轮播图切换内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！