js 定时器 setInterval(图片的自动变换)

js如何实现图片自动的切换

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			window.onload = function() {

				var img1 = document.getElementsByTagName("img")[0];
				var imgArr = ["../img/1.webp", "../img/2.webp", "../img/3.webp", "../img/4.webp", "../img/5.webp", ]
				var index = 0;
				var number;
				/**
				 * 目前。我们没点击一个按钮就会开启一个定时器，点击多次就会开启多个定时器，这就导致图片的切换速度变快
				 */
				document.getElementById("btn01").onclick = function() {
					//开启定时器之前一定要关闭当前元素上的其他定时器，否则就会导致开启多个定时器
					clearInterval(number);
					number = setInterval(function() {
						img1.setAttribute("src", imgArr[index]);
						index++;
						if (index >= imgArr.length) {
							//则设置index为0
							index = 0;
						}
					}, 1000)
				}

				document.getElementById("btn02").onclick = function() {
					clearInterval(number)
				}

			}
		script>
	head>
	<body>
		<img src="../img/1.webp" />
		<button id="btn01">开始button>
		<button id="btn02">停止button>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

相关阅读:
springcloud之gateway服务网关
Netty - 回顾Netty高性能原理和框架架构解析
Linux 指令心法（十五）`flash_eraseall` 擦除整个Flash存储器
滚珠螺母在工业机器人中的应用优势
hibernate学习笔记-1入门初体验对象持久化
【python】内置库函数大集合 ❢ 这不得点赞收藏一波~
【Python机器学习】零基础掌握VotingClassifier集成学习
taobao.logistics.dummy.send( 无需物流发货处理 )接口，淘宝r2接口，淘宝oAu2.0接口，淘宝订单发货接口
Easy-Classification-验证码识别
Java面试题异常相关

原文地址：https://blog.csdn.net/m0_52946104/article/details/126978182