使用JavaScript实现图像自动切换-优快云博客

本文介绍了如何利用JavaScript的setInterval函数实现图像自动切换的效果，通过定时改变<img>标签的src属性达到动态显示不同图片的目的。

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

图像自动切换

图像自动切换一般可以使用JavaScript的定时器来按照一定的时间间隔更新<img>标签中的src属性。

JavaScript中的定时器可通过setInterval函数实现，代码如下：

setInterval("function()",interval);

test.html源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动切换图片</title>
<script type="text/javascript">
	setInterval("loadImage()", 3000);	//启动定时器
	var images = ['0.jpg','1.jpg','2.jpg','3.jpg','4.jpg'];	//指定图像文件名
	var i = 0;	//从第一个图像文件开始显示
	//装载图像文件(定时器调用)
	function loadImage() {
		i++;
		//当显示到第五个图像文件时，再从第一个图像开始循环
		if(i==5)
		i=0;
		var oImage = document.getElementById("image");	//得到Img标签
		var oLabel = document.getElementById("info");	//得到Label标签
		oImage.src = 'images/'+images[i];	//为img标签的src属性赋值
		oLabel.innerText = images[i];	//显示当前的图像文件名
		
	}
	
	

</script>
</head>
<body>
 当前图像名：<label id="info"></label> 
<p />
	<img src='images/0.jpg' id="image" width="320px" height="240px">
<script type="text/javascript">
	var oLabel = document.getElementById("info");
	//在初始化时显示第一个图像文件
	oLabel.innerText = images[i];
</script>
</body>
</html>