js基础——切换图片练习

最新推荐文章于 2021-09-27 17:05:31 发布

jwz934738949

最新推荐文章于 2021-09-27 17:05:31 发布

阅读量133

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/100827780

版权

javascript基础专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换图片练习</title>
    <script>
        window.onload = function () {
            //用来存放所有图片的src地址
            var arr = ["image/1.png", "image/2.png", "image/3.png", "image/4.png", "image/5.png"];
            var index = 0;
            var img = document.getElementsByTagName("img");
            var b1 = document.getElementById("b1");
            var b2 = document.getElementById("b2");
            var timer;
            b1.onclick = function () {
                //首先清空定时器，防止同一个定时器被调用多次
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    if (index >= arr.length) {
                        index = 0;
                    }
                    img[0].src = arr[index];
                }, 1000);
            };
            b2.onclick = function () {
                clearInterval(timer);
            };
        };
    </script>
</head>
<body>
<img src="image/1.png" alt=""> <br>
<button id="b1">开始滚动</button>
<button id="b2">停止滚动</button>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础——切换图片练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>切换图片练习</title> <script> window.onload = function () { /...
复制链接

扫一扫