JS定时器_制作网页中图片的轮播效果

最新推荐文章于 2024-05-14 23:10:25 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2024-05-14 23:10:25 发布

阅读量362

点赞数 3

分类专栏： JavaScript CSS3 HTML5 文章标签： js javascript dom

本文链接：https://blog.csdn.net/m0_47015897/article/details/115606971

版权

CSS3 同时被 3 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
源码及解析：

<!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>
    <script>
        window.onload = function(){
            /* 
                使图片可以自动切换

             */
            var img = document.getElementById("img");
            var btn = document.getElementById("btn");
            var btn2 = document.getElementById("btn2");

            var srcArr = ["../02DOM/img/1.jpg","../02DOM/img/2.jpg","../02DOM/img/3.jpg","../02DOM/img/4.jpg","../02DOM/img/5.jpg"]; 
            var i = 0;
            var timer;
            btn.onclick = function(){
                /* 
                    目前，我们每次点击一次按钮，就会开启一个定时器
                        点击多次就会开启多个定时器，这就导致图片的切换速度过快
                        并且我们只能关闭最后一次开启的定时器
                 */
                //在开启定时器之前，需要将当前元素上的其他定时器关闭
                clearInterval(timer);

                timer = setInterval(function(){
                    console.log(i);
                    i = i % srcArr.length;
                    img.src = srcArr[i++];
                    // if(i == 5){
                    //     // clearInterval(timer);
                    //     i = 0;
                    // }

                }, 500);
            };

            btn2.onclick = function(){
                //clearInterval() 可以接收任意参数
                //  如果参数是一个有效的定时器的标识，则停止对应的定时器
                //  如果参数不是一个有效的标识，则什么也不做
                clearInterval(timer);
            };
        };
    </script>
</head>
<body>
    <button id="btn">开始</button>
    <button id="btn2">停止</button>
    <br>
    <img src="../02DOM/img/1.jpg" alt="" id="img">
</body>
</html>

Etui۹(･༥･´)و ̑̑

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JS定时器_制作网页中图片的轮播效果

效果图：源码及解析：<!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"> &lt
复制链接

扫一扫