JS使用定时器与事件监听实现轮播图切换功能
可乐不撒 人气:0HTML部分
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循环遍历之后给每一个小圆点添加事件监听切换图片和圆点样式
效果图
加载全部内容