JS简单轮播图,图片切换暂停开始

最新推荐文章于 2023-10-08 16:25:24 发布

请问大家代码怎么敲

最新推荐文章于 2023-10-08 16:25:24 发布

阅读量1k

点赞数 1

分类专栏： javaScript js 文章标签： JavaScript 图片切换定时器 DOM操作事件处理

本文链接：https://blog.youkuaiyun.com/liumuye88888/article/details/115740317

版权

js 同时被 2 个专栏收录

23 篇文章

订阅专栏

javaScript

19 篇文章

订阅专栏

该博客展示了如何使用JavaScript实现一个图片轮播功能。通过获取img标签并设置数组保存图片路径，结合定时器实现图片自动切换。点击开始按钮启动定时器进行切换，点击暂停按钮则停止切换。代码中包含了清除已有定时器的逻辑，以防止多次点击导致切换速度过快。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            // 使图片自动切换

            // 获取img标签
            var img1 = document.getElementById("img1")
            // 创建一个数组保存图片路径
            var imgArr = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg",]

            // 创建一个变量,用来保存图片的索引
            var index = 0;

            // 定义一个变量,用来保存定时器标识
            var timer;

            // 为btn01绑定一个单击响应函数
            var btn01 = document.getElementById("btn01")
            btn01.onclick = function () {

                // 目前,我们每点击一次按钮,就会开启一个定时器
                // 点击多次就会开启多个定时器,就导致图片的切换速度过快,并且我们只能关闭最后一个开启的定时器 
                // 开启定时器之前,需要将当前元素上的其他定时器关闭
                clearInterval(timer)
                // 开启一个定时器,来回切换图片
             timer = setInterval(() => {

                    index++;

                    // 判断索引是否超过最大索引
                    // 方法1
                    // if(index>=imgArr.length){
                    //     index = 0
                    // }
                    // 方法2
                    //1 % 4 = 1   2 % 4 = 2  3 % 4 = 3  4 % 4 = 0
                    /*
                    基本上所有程序语言对 % 操作符的处理都是这样的
                    当要处理 X % Y时, 如果, X < Y 的话, 回传值就是 X 自己
                    意思... 简单来说, 就是因为当一次都除不到, 就只能剩下 "自己" 了.*/
                    index = index % imgArr.length

                    img1.src = imgArr[index]

                }, 1000);

            }

            // 为btn02绑定一个单击响应函数
            var btn02 = document.getElementById("btn02")
            btn02.onclick = function () {
                clearInterval(timer)
            }


        }



    </script>
</head>

<body>
    <button id="btn01">开始</button>
    <button id="btn02">暂停</button>
    <br>
    <img src="./img/1.jpg" alt="" id="img1">

    
</body>

</html>