js-切换图片-实现图片的轮播-定时器

¡Venceremo

于 2022-10-27 13:48:37 发布

阅读量406

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127533993

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

进行判断：

索引为几是时候归零，可以使用%取模

	 if(index==6){
					 	index=0;
	 }

等价

	index=index%imgSrc.length;

clearInterval(time);可以接收任意参数

如参数是有效的定时器的标识。则停止对应的定时器

如果参数不是一个有效的标识，则什么也不做

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#img1 {
				height: 300px;
				width: 400px;
			}
		</style>
		<script>
			window.onload = function() {

				var img = document.getElementById("img1");
				var title = document.getElementById("title");
				var imgSrc = ["../img/a0.png", "../img/a1.png", "../img/a2.png", "../img/a3.png", "../img/a4.png",
					"../img/a5.png"
				]
				var index = 0;
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				var time;
				btn01.onclick = function() {
					clearInterval(time);//在开启新的定时器之前关闭了
					//开启定时器自动切换
					//每点击一个开始就会开启一个定时器
					//如果点击定时器的时候没有关闭，
					//也就是有多个定时器被同时启用了 就会加快速度
					time=setInterval(function() {

						img.src = imgSrc[index++];
						title.innerHTML = "这是第" + index + "张图片"
						// if(index==6){
						// 	index=0;
						// }
						index = index % imgSrc.length;
					}, 1000);
				};
				btn02.onclick = function() {
					//开启定时器自动切换
					
					clearInterval(time);
				}
			}
		</script>
	</head>
	<body>
		<p id="title"">这是第1张图片</p>
		<img src=" ../img/a0.png" alt="图片" id="img1">
			<br>
			<button id="btn01">开始轮播</button>
			<button id="btn02">关闭轮播</button>
	</body>
</html>