利用定时器切换图片

最新推荐文章于 2024-06-02 09:00:00 发布

原创最新推荐文章于 2024-06-02 09:00:00 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用JavaScript定时器实现图片轮播效果，详细讲解了相关代码实现和原理，包括图片的自动切换、过渡动画及手动控制等功能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width:100px;
				height:100px;
				overflow: hidden;
			}
		</style>
		<script type="text/javascript">
			window.function(){
				/**
				 *使图片可以自动切换 
				 */
				var timer;
				//获取img标签
				var img1=document.getElementById("img1");
				//创建一个数组来保存图片的路径
				var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				//创建一个变量,用来保存当前图片的索引
				var index=0;
				
				//为btn绑定一个单击响应函数
				var btn=document.getElementById("btn");
				btn.function(){
					/**
					 * 目前每点击一次按钮就会开启一次定时器
					 * 点击多次就会开启多个定时器，这就导致图片的切换速度过快，
					 * 并且我们只能关闭最后一次开启的定时器
					 */
					
					//开启之前先关了上一个定时器
					clearInterval(timer);
						//开启定时器去切换
				timer=setInterval(function(){
					index++;
// 					if(index==5){
// 						index=0;
// 					}
					index=index%imgArr.length;
					img1.src=imgArr[index];
				},1000);
				};
				
				var btn02=document.getElementById("btn02");
				btn02.function(){
					//点击按钮以后 ,停止图片的自动切换
					/**
					 * cleatInterval()可以接收任意参数，
					 * 如果参数不是一个有效的标识，则什么也不做
					 */
					clearInterval(timer);
				}
				
				
			
				
				
			};
		</script>
	</head>
	<body>
		<button id="btn">开始</button>
		<button id="btn02">停止</button>
		<img id="img1" src="img/1.jpg" alt=""/>
	</body>
</html>