一、定时函数
1、超时调用
使用**setTimeout()方法接受两个参数:要执行的函数或代码块,以及延迟的毫秒数
示例:
function show() {
console.log("大帅哥你好!");
}
// 2秒后执行 show函数输出(以毫秒为单位)
setTimeout(show, 2000);
调用setTimeout()方法,该方法会返回一个数值ID,表示超时函数(后面关闭有用)
2、间歇调用
使用setInterval() 方法用于按照指定的时间间隔重复执行指定的函数或代码。该方法同样接受两个参数:要执行的函数或代码块,以及时间间隔的毫秒数
示例:
function show() {
console.log("大帅哥你好!");
}
// 每隔2秒执行一次 show函数
var intervalID = setInterval(show, 2000);
调用setInterval()方法,该方法也会返回一个数值ID。
区别:
超时只会执行一次
间歇会重复执行 (当然不会让他一直执行,所以会有取消定时函数)
二、取消定时函数
1、取消超时函数
您可以使用 clearTimeout() 来取消这个超时函数
示例:
function show() {
console.log("大帅哥你好!");
}
//取到超时返回的ID,把ID作为clearTimeout方法的参数传进去,就可以关闭啦
var intervalID = setTimeout(show, 2000);
clearTimeout(intervalID );
2、取消间歇函数
function show() {
console.log("大帅哥你好!");
}
//取到超时返回的ID,把ID作为clearInterval方法的参数传进去,就可以关闭啦
var intervalID = setInterval(show, 2000);
clearInterval(intervalID );
三、自动轮播
行现在开始写自动轮播图
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
//设置轮播图大小
div img{
width: 100px; /*轮播的宽*/
height: 100px; /*轮播的高*/
}
</style>
</head>
<body>
<!-- 轮播图 img里面是默认路径 -->
<div id="show"><img src="./图片/1.jpg" alt=""></div>
<script>
const images = ['./图片/西红柿炒鸡蛋.webp', './图片/2.jpg', './图片/1.jpg']; // 写一个数组把路径存进来
let index = 0; // 当前显示的图片索引
function showSlide() {//写一个更换路径的方法
//id名字为show的 div,里面第一个标签名字为img的图片路径换成数组里面的路径
document.getElementById('show').getElementsByTagName('img')[0].src=images[index];
index = (index + 1);//计算好到哪个图片,也可以理解成图片的下标
if(index>=images.length){//到最后一个重新回到第一个
index=0;//数组下标0
} // 更新图片索引
}
setInterval(showSlide, 1000); // 每隔1秒切换一张图片
</script>
</body>
</html>