js小案例-轮播图（定时器）

小鱼·

已于 2023-02-03 10:40:25 修改

阅读量1.9k

点赞数 2

文章标签：前端 html css 开发语言 javascript

于 2023-02-03 10:36:52 首次发布

本文链接：https://blog.csdn.net/ass12454548/article/details/128861842

版权

1.找几张你喜欢的图片

2.新建一个HTML页面

3.给一个div把img放进去加上第一张图片

html代码如下:

<div>

        <img src="1.jpg" alt="">
 </div>

css代码如下:

 div {
            width: 1000px;
           
        }

img {
            width: 100%;
        }

4.在div元素的下面新建一个script标签添加效果:

这里因为我们要做轮播图，所以我们用定时器
定义一个定时器：每1s切换一张图片，一共四张图片,在定时器内声明函数,这里需要定义一个变量 index用来接受图片，把图片的路径赋值给图片的src值，图片每变化一次，我们让 index自增，这里做一个判断当 index 自增到4时，让 index 等于0，这样就可以一直不停地变化下去，达到轮播的效果。

js代码如下:

<script>
        let img = document.querySelector('img');//获取元素
        let imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg',];//把需要轮播的图片用数组装起来
        let index = 0;//声明一个变量接受图片
        setInterval(function () {
            index++;
            if (index >= imgArr.length) {//判断index值如果大于等于数组内的长度index就等于0,就是数组的第一个索引号
                index = 0;
            }
            img.src = imgArr[index];//最后把得到的索引号赋值给src属性,就是我们轮播所得到的图片
        }, 1000);//这里1000代表1000毫秒等于1秒
    </script>

js的定时器分为两种

1、延时定时器：两种方法

开始延时定时器：setTimeout()
清除延时定时器：clearTimeout()

2、循环定时器：两种方法

开始循环定时器：setInterval()
清除循环定时器：clearInterval()

完整代码如下有问题可以留言,觉得可以的话,点个赞再走哦

<!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>
        div {
            width: 1000px;

        }

        div img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div>

        <img src="1.jpg" alt="">
    </div>
    <script>
        let img = document.querySelector('img');
        let imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg',];
        let index = 0;
        setInterval(function () {
            index++;
            if (index >= imgArr.length) {
                index = 0;
            }
            img.src = imgArr[index];
        }, 1000);
    </script>
</body>

</html>