超基础自动轮播

NoloveisGod

于 2024-03-28 20:53:19 发布

阅读量684

点赞数 13

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/AE_BD/article/details/137124134

版权

一、定时函数

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>