图片切换练习setInterval()、clearInterval()

本文介绍如何利用JavaScript的setInterval方法实现图片自动切换功能,通过创建一个定时器,每隔一定时间自动更换图片,同时提供了开始和暂停按钮的实现方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

w3school的解释:

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

实现图片切换:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片切换</title>
		<script type="text/javascript">
			window.onload=function(){
				//获取img标签
				var img1=document.getElementById("img1");
			
				//创建一个索引,用来保存图片的路径
				var imgArr=["img/1.jpg","img/2.JPG","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];
				
				//创建一个变量,用来保存当前图片的索引
				var index=0;
				
				//定义一个变量,用来保存定时器的标识
				var timer;
				
				//获取按钮
				var btn01=document.getElementById("btn01");
				btn01.onclick=function(){
					
				/*
				 * 开启一个定时器
				 */
				/*
				 * 关闭之前开启的定时器,防止多次点击,持续开启定时器
				 */
				clearInterval(timer);
				timer=setInterval(function(){
					/*
					 * 使索引自增
					 */
					index++;
					if(index>=imgArr.length){
						index=0;
					};
                 
					//修改img1的src属性
					img1.src=imgArr[index];
				},1000);
				
				};
				
				//获取btn02按钮
				var btn02=document.getElementById("btn02");
				btn02.onclick=function(){
					clearInterval(timer);
				};
			};
		</script>
	</head>
	<body>
		<img  id="img1" src="img/1.jpg" style="width: 200px;"/>
		<br />
		<br />
		<button id="btn01">开始</button>
		<button id="btn02">暂停</button>
	</body>
</html>

效果图:
点击开始,定时器启动,自动切换,点击暂停,图片停止切换

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值