JS基础-图片切换练习

最新推荐文章于 2022-07-27 09:11:59 发布

linqunbin

最新推荐文章于 2022-07-27 09:11:59 发布

阅读量118

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/90757946

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function () {
            var imgArray = [
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/001.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/002.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/003.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/004.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/005.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/006.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/007.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/008.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/009.jpg',
                '/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/010.jpg',
            ];
            var index = 0;
            var img = document.getElementById('img');
            var begin = document.getElementById('begin');
            var end = document.getElementById('end');

            // 先定义一个timeInterval的变量,防止clearInterval(timeInterval)调用timeInterval时出现undefined.
            var timeInterval

            // 点击图片开始循环
            begin.onclick = function () {
                /*
                目前,我们每点击依次按钮,就会开启一个定时器,
                    点击多次就会开启多个定时器,这就导致图片的切换速度过快,
                    并且我们只能关闭最后一次开启的定时器
                */
                // 开启定时器之前,需要将上一个定时器关闭
                clearInterval(timeInterval);

                timeInterval = setInterval(function () {
                    img.src = imgArray[index];
                    index++;
                    if (index >= imgArray.length) {
                        index = 0;
                    };
                }, 1500);
            };

            // 点击图片停止循环
            end.onclick = function () {
                clearInterval(timeInterval);
            };
        };
    </script>
</head>

<body>
    <button id="begin">开始循环图片</button>
    <button id="end">停止循环图片</button>
    <br>
    <img src="" alt="暂无图片" id="img" width="300px">
</body>

</html>

linqunbin

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录