文章目录
-
- 定时器介绍
- 开启定时器函数
- 关闭定时器函数
- 轮播图自动播放
- html部分
- css修饰部分
- Js装饰部分
- 完整代码展示
- 小结
定时器介绍
在Javascript中定时器是利用间歇函数实现重复执行代码。定时器函数主要通过开启定时器函数和关闭定时器函数。
- 开启定时器函数:setInterval(函数,间隔时间),其中的间隔时间为毫秒,1秒=1000毫秒。作用:每一一段时间调用该函数。其中定时器返回的是一个id数字(主要用于关闭定时器)。
setInterval(function(){console.log('一秒执行一次')}, 1000)
- 关闭定时函数:clearInterval(变量名)。语法:let 变量名 = setInterval(函数,间隔时间) clearInterval(变量名)
let n = setInterval(function () {console.log('一秒执行一次')}, 1000) clearInterval(n)
轮播图自动播放
- html部分
<div class="slider"> <div class="slider-wrapper"> <img src="../images/2.jpg" alt="" /> </div> <div class="slider-footer"> <p>一点一滴每一天珍惜</p> <ul class="slider-indicator"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="toggle"> <button class="prev"><</button> <button class="next">></button> </div> </div> </div>
- css部分
* { box-sizing: border-box; } .slider { width: 560px; height: 400px; overflow: hidden; } .slider-wrapper { width: 100%; height: 320px; } .slider-wrapper img { width: 100%; height: 100%; display: block; } .slider-footer { height: 80px; background-color: rgb(100, 67, 68); padding: 12px 12px 0 12px; position: relative; } .slider-footer .toggle { position: absolute; right: 0; top: 12px; display: flex; } .slider-footer .toggle button { margin-right: 12px; width: 28px; height: 28px; appearance: none; border: none; background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 4px; cursor: pointer; } .slider-footer .toggle button:hover { background: rgba(255, 255, 255, 0.2); } .slider-footer p { margin: 0; color: #fff; font-size: 18px; margin-bottom: 10px; } .slider-indicator { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; } .slider-indicator li { width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #fff; opacity: 0.4; cursor: pointer; } .slider-indicator li.active { width: 12px; height: 12px; opacity: 1; }
- Js部分 分析:1.准备一个数组对象,里面放置需要进行更换的详细信息;2.通过JS中的document.querySelector进行获取元素;3.设置定时器函数,定义一个为0的变量,再将其变量放进函数进行自加操作,然后找到变量对应的对象,进行更换信息,最后激活小圆点,一处上一个高亮的类名,当前变量添加对应的小圆点添加类(数组是从0开始计算,变量也是从0开始的,但是小圆点是从1开始计算的因此需要变量值加1);4.处理图片自动复原从头播放(放到变量自加后面),如果变量大于数组长度则表示图片播放到最后一张了,再将变量重置为0.
// 1. 初始数据 const sliderData = [{ url: '../images/2.jpg', title: '一点一滴每一天珍惜', color: 'rgb(100, 67, 68)' }, { url: '../images/3.jpg', title: '怕突然来不及好好的爱你', color: 'rgb(43, 35, 26)' }, { url: '../images/4.jpg', title: '时针一直倒数着', color: 'rgb(36, 31, 33)' }, { url: '../images/5.jpg', title: '我们剩下的快乐', color: 'rgb(139, 98, 66)' }, { url: '../images/6.jpg', title: '此刻相拥的狂热', color: 'rgb(67, 90, 92)' }, { url: '../images/1.jpg', title: '却永远都深刻', color: 'rgb(166, 131, 143)' }, { url: '../images/7.jpg', title: '——邓紫棋《倒数》', color: 'rgb(53, 29, 25)' }, ] const img = document.querySelector('.slider-wrapper img') const p = document.querySelector('.slider-footer p') const bgc = document.querySelector('.slider-footer') let i = 0 function fn() { i++ // 无缝滚动位置 if (i >= sliderData.length) { i = 0 } img.src = sliderData[i].url p.innerHTML = sliderData[i].title bgc.style.backgroundColor = sliderData[i].color // 先删除原有的active document.querySelector('.slider-indicator .active').classList.remove('active') // 只让当前的li添加active document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active') } setInterval(fn, 1000)
完整代码展示
`
<!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>轮播图点击切换</title>
<style>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="../images/2.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了?</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [{
url: '../images/2.jpg',
title: '一点一滴每一天珍惜',
color: 'rgb(100, 67, 68)'
}, {
url: '../images/3.jpg',
title: '怕突然来不及好好的爱你',
color: 'rgb(43, 35, 26)'
}, {
url: '../images/4.jpg',
title: '时针一直倒数着',
color: 'rgb(36, 31, 33)'
}, {
url: '../images/5.jpg',
title: '我们剩下的快乐',
color: 'rgb(139, 98, 66)'
}, {
url: '../images/6.jpg',
title: '此刻相拥的狂热',
color: 'rgb(67, 90, 92)'
}, {
url: '../images/1.jpg',
title: '却永远都深刻',
color: 'rgb(166, 131, 143)'
}, {
url: '../images/7.jpg',
title: '——邓紫棋《倒数》',
color: 'rgb(53, 29, 25)'
}, ]
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const bgc = document.querySelector('.slider-footer')
let i = 0
function fn() {
i++
// 无缝滚动位置
if (i >= sliderData.length) {
i = 0
}
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
bgc.style.backgroundColor = sliderData[i].color
// 先删除原有的active
document.querySelector('.slider-indicator .active').classList.remove('active')
// 只让当前的li添加active
document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
}
setInterval(fn, 1000)
</script>
</body>
</html>
小结
在使用开启定时器函数时应注意:函数名不需要加括号(下面代码为特殊情况,不提倡使用
function fn() {
console.log('一秒执行一次')
}
setInterval('fn()' , 1000)
)