图像自动切换

最新推荐文章于 2021-10-18 10:42:50 发布

iteye_15712

最新推荐文章于 2021-10-18 10:42:50 发布

阅读量136

点赞数

分类专栏： JavaScript 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/iteye_15712/article/details/81791584

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像自动切换</title>
<script language =javascript > 
	var curIndex=0; 
	//时间间隔 单位毫秒 
	var timeInterval=1000; 
	var arr=new Array(); 
	arr[0]="img/01.jpg"; 
	arr[1]="img/02.jpg"; 
	arr[2]="img/03.jpg"; 
	arr[3]="img/04.jpg"; 
	arr[4]="img/05.jpg"; 
	arr[5]="img/06.jpg"; 
	arr[6]="img/07.jpg"; 
	//启动定时器
	setInterval(changeImg,timeInterval); 
	
	function changeImg() 
	{ 
		var myImg=document.getElementById("myImg"); //得到img标签
		var info = document.getElementById("info");//得到label标签
		if (curIndex==arr.length-1) 
		{ 
			curIndex=0; 
		} 
		else 
		{ 
			curIndex+=1; 
		} 
		myImg.src=arr[curIndex]; //
		info.innerText = "第"+curIndex+"张图像";//显示为当前的图像说明
	} 
</script>
</head>
<body>
    <center>
        <label id="info">图像</label><br />
        <img id="myImg" src ="img/01.jpg" border =0 width="500px" />
    </center>
</body>